/* =============================================================================
 * NYSIRIS login theme — matches the HOSTING cockpit login (graphite/dark).
 * Same palette (--surface #151a23, --accent emerald #10b981), the real NYSIRIS
 * icon + "NYSIRIS" Grames wordmark + subtitle lockup, compact dark card, subtle
 * inputs, green button. Layered over Keycloak v2 (PatternFly v5); loaded AFTER
 * the base css/styles.css so these rules win.
 * ========================================================================== */

@font-face {
  font-family: "NYSIRIS Wordmark";
  src: url("../fonts/wordmark.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --nys-bg: #0b0e14;
  --nys-surface: #151a23;
  --nys-surface-2: #1c222d;
  --nys-text: #e6eaf2;
  --nys-dim: #8a93a6;
  --nys-border: #232c3a;
  --nys-accent: #10b981;
  --nys-accent-600: #0ea372;
  --nys-accent-700: #0b8a60;
  --nys-radius: 12px;
  --nys-radius-sm: 8px;
  --nys-ring: color-mix(in srgb, var(--nys-accent) 32%, transparent);
  --nys-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nys-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Page: solid graphite, centered (like .auth-body) --------------------- */
html, body, body.login-pf, .login-pf body, .login-pf-page {
  background:
    radial-gradient(800px 460px at 50% -6%, rgba(16,185,129,.08) 0%, transparent 62%),
    var(--nys-bg) !important;
  background-attachment: fixed !important;
  color: var(--nys-text) !important;
}

/* ---- Brand lockup above the card: icon + "NYSIRIS" (Grames) + subtitle ----- */
#kc-header, #kc-header-wrapper { padding: 20px 0 14px !important; overflow: visible !important; }
.kc-logo-text, #kc-header-wrapper .kc-logo-text {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: 12px; width: auto !important; height: auto !important; margin: 0 auto !important;
  background: none !important; text-indent: 0 !important;
}
.kc-logo-text::before {
  content: ""; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px;
  background: url("../img/logo.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 16px rgba(16,185,129,.22));
}
.kc-logo-text span {
  display: inline-flex !important; flex-direction: column; align-items: flex-start;
  font-family: "NYSIRIS Wordmark", var(--nys-ui) !important;
  font-weight: 800 !important; font-size: 17px !important; letter-spacing: .14em;
  line-height: 1.05; color: var(--nys-text) !important;
  text-indent: 0 !important; text-transform: none !important;
}
.kc-logo-text span::after {
  content: "Single Sign-On";
  font-family: var(--nys-ui); font-weight: 600; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nys-dim); margin-top: 3px;
}

/* ---- Card: compact dark surface (like .auth-card) ------------------------- */
.card-pf, .pf-v5-c-login__main, #kc-form-wrapper .card-pf {
  width: 100% !important; max-width: 380px !important; margin: 0 auto !important;
  background: var(--nys-surface) !important;
  border: 1px solid var(--nys-border) !important;
  border-radius: var(--nys-radius) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22) !important;
  padding: 28px !important;
  color: var(--nys-text) !important;
  animation: nys-rise .45s var(--nys-ease) both;
}
@keyframes nys-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.login-pf-page .card-pf { margin-top: 8px !important; }

.pf-v5-c-login__main-header { padding: 0 0 8px !important; display: block !important; }
.pf-v5-c-login__main-body { padding-top: 2px !important; }
#kc-page-title, .pf-v5-c-login__main-header-title {
  color: var(--nys-text) !important; font-weight: 600 !important; font-size: 19px !important;
  letter-spacing: -.1px; margin-bottom: 12px !important; white-space: nowrap !important;
}

/* ---- Labels (the .field > span equivalent) -------------------------------- */
.pf-v5-c-form__label, #kc-form label, .control-label {
  color: var(--nys-dim) !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .2px;
}
.pf-v5-c-form__group:focus-within .pf-v5-c-form__label { color: var(--nys-text) !important; }
.pf-v5-c-form__group { margin-bottom: 14px !important; }

/* ---- Inputs: subtle dark fill, green focus (single box) -------------------
 * PF `.pf-v5-c-form-control` is a WRAPPER; the <input> is bare inside it. */
.pf-v5-c-form-control {
  display: flex !important; align-items: center !important;
  min-height: 44px !important; padding: 0 4px 0 0 !important;
  border-radius: var(--nys-radius-sm) !important;
  border: 1px solid var(--nys-border) !important;
  background-color: var(--nys-surface-2) !important;
  box-shadow: none !important;
  transition: border-color .16s var(--nys-ease), box-shadow .16s var(--nys-ease), background-color .16s var(--nys-ease) !important;
}
.pf-v5-c-form-control > input, .pf-v5-c-form-control input,
#kc-form input[type="text"], #kc-form input[type="email"], #kc-form input[type="password"] {
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  width: 100% !important; min-height: 40px !important;
  padding: 10px 13px !important; font-size: 14px !important; color: var(--nys-text) !important;
}
.pf-v5-c-form-control > input::placeholder, #kc-form input::placeholder { color: #5b6675 !important; }
.pf-v5-c-form-control::after, .pf-v5-c-form-control::before { display: none !important; border: 0 !important; }
.pf-v5-c-form-control:hover { border-color: #2f3a4c !important; }
.pf-v5-c-form-control:focus-within {
  border-color: var(--nys-accent) !important; background-color: var(--nys-surface-2) !important;
  box-shadow: 0 0 0 3px var(--nys-ring) !important;
}
.pf-v5-c-form__label, label { transition: color .16s var(--nys-ease); }

/* ---- Password field: input-group is the box, contents flat ---------------- */
.pf-v5-c-input-group {
  display: flex !important; align-items: center !important; min-height: 44px !important;
  border: 1px solid var(--nys-border) !important; background: var(--nys-surface-2) !important;
  border-radius: var(--nys-radius-sm) !important; overflow: hidden !important;
  transition: border-color .16s var(--nys-ease), box-shadow .16s var(--nys-ease) !important;
}
.pf-v5-c-input-group:hover { border-color: #2f3a4c !important; }
.pf-v5-c-input-group:focus-within { border-color: var(--nys-accent) !important; box-shadow: 0 0 0 3px var(--nys-ring) !important; }
.pf-v5-c-input-group .pf-v5-c-form-control, .pf-v5-c-input-group__item {
  border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 42px !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 0 !important; background: transparent !important; color: var(--nys-dim) !important; border-radius: 0 !important;
  transition: color .15s var(--nys-ease) !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover { color: var(--nys-accent) !important; background: rgba(16,185,129,.08) !important; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after, .pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before { display: none !important; }

/* ---- Primary button: emerald accent (like .btn--primary) ------------------ */
#kc-login,
input[type="submit"].pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary, .btn-primary {
  background: var(--nys-accent) !important; border: 1px solid var(--nys-accent) !important; color: #04140d !important;
  font-weight: 700 !important; letter-spacing: .2px; font-size: 14.5px !important;
  min-height: 44px !important; padding: 10px 18px !important; border-radius: var(--nys-radius-sm) !important;
  box-shadow: 0 8px 20px -12px rgba(16,185,129,.7) !important;
  transition: transform .12s var(--nys-ease), box-shadow .2s var(--nys-ease), background-color .15s var(--nys-ease) !important;
}
#kc-login:hover, .pf-v5-c-button.pf-m-primary:hover, .btn-primary:hover {
  background: var(--nys-accent-600) !important; border-color: var(--nys-accent-600) !important; transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(16,185,129,.85) !important;
}
#kc-login:active, .pf-v5-c-button.pf-m-primary:active { background: var(--nys-accent-700) !important; transform: translateY(0); }
#kc-login:focus-visible, .pf-v5-c-button.pf-m-primary:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--nys-ring) !important; }
#kc-form-login .pf-v5-c-form__group:not(:has(*)) { display: none !important; }
#kc-form-login .pf-v5-c-form__group:has(.pf-v5-c-form__actions),
#kc-form-login .pf-v5-c-form__group:last-child, #kc-form-buttons { margin-top: -4px !important; }
#kc-form-login .pf-v5-c-form__actions { margin: 0 !important; }
.pf-v5-c-form__helper-text { margin-top: 6px !important; }

/* ---- Links: accent ------------------------------------------------------- */
a, #kc-registration a, #kc-info a, .login-pf-page a, #kc-form-options a,
.pf-v5-c-login__main-footer-band a {
  color: var(--nys-accent) !important; text-decoration: none !important;
  transition: color .15s var(--nys-ease) !important;
}
a:hover { color: var(--nys-accent-600) !important; text-decoration: underline !important; }
#kc-form-options { display: flex !important; justify-content: flex-end !important; margin: -2px 0 8px !important; }
#kc-form-options a { font-size: 12.5px !important; font-weight: 600 !important; }

/* ---- Checkbox (Remember me) ----------------------------------------------- */
.pf-v5-c-check, label.pf-v5-c-check { display: inline-flex !important; align-items: center !important; gap: 9px !important; }
.pf-v5-c-check__input, #kc-form input[type="checkbox"], input#rememberMe {
  width: 17px !important; height: 17px !important; min-width: 17px !important; flex: 0 0 17px !important;
  margin: 0 !important; accent-color: var(--nys-accent); border-radius: 5px !important; cursor: pointer;
}
.pf-v5-c-check__label, label[for="rememberMe"] { color: var(--nys-dim) !important; font-weight: 500 !important; font-size: 13px !important; cursor: pointer; margin: 0 !important; }

/* ---- Language selector (admin realm): compact dark dropdown ---------------- */
.pf-v5-c-login__main-header-utilities { display: flex !important; justify-content: flex-end !important; margin: 6px 0 2px !important; }
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control { width: auto !important; min-width: 140px !important; max-width: 200px !important; min-height: 38px !important; padding: 0 !important; }
select#login-select-toggle, .pf-v5-c-form-control > select, #kc-form select {
  border: 0 !important; background-color: transparent !important; box-shadow: none !important; outline: none !important;
  width: 100% !important; min-height: 36px !important; padding: 8px 12px !important;
  font-size: 13.5px !important; color: var(--nys-text) !important; cursor: pointer;
}
.pf-v5-c-form-control:has(> select) { background-color: var(--nys-surface-2) !important; }
select#login-select-toggle option { color: var(--nys-text) !important; background: var(--nys-surface) !important; }

/* ---- Alerts / validation -------------------------------------------------- */
#input-error, .pf-v5-c-form__helper-text.pf-m-error { color: #f87171 !important; font-size: 12.5px !important; font-weight: 500 !important; }
.pf-v5-c-alert.pf-m-danger, .pf-v5-c-alert.pf-m-warning, .alert-error {
  background: color-mix(in srgb, #ef4444 14%, transparent) !important; color: #fca5a5 !important;
  border: 1px solid color-mix(in srgb, #ef4444 40%, var(--nys-border)) !important; border-radius: var(--nys-radius-sm) !important;
}
.pf-v5-c-alert.pf-m-success { background: color-mix(in srgb, var(--nys-accent) 14%, transparent) !important; color: #6ee7b7 !important; border: 1px solid color-mix(in srgb, var(--nys-accent) 40%, var(--nys-border)) !important; border-radius: var(--nys-radius-sm) !important; }
.pf-v5-c-alert__icon { color: inherit !important; }

/* ---- Social / IdP buttons + footer ---------------------------------------- */
#kc-social-providers { margin-top: 16px !important; }
#kc-social-providers ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 9px !important; }
#kc-social-providers a {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  min-height: 42px !important; padding: 9px 16px !important; border: 1px solid var(--nys-border) !important;
  border-radius: var(--nys-radius-sm) !important; background: var(--nys-surface-2) !important; color: var(--nys-text) !important;
  font-weight: 600 !important; font-size: 13.5px !important; text-decoration: none !important;
  transition: border-color .15s var(--nys-ease), background-color .15s var(--nys-ease) !important;
}
#kc-social-providers a:hover { border-color: var(--nys-accent) !important; background: #20262f !important; }

#kc-info, .pf-v5-c-login__main-footer { margin-top: 2px !important; }
#kc-registration-container.pf-v5-c-login__main-footer-band {
  margin-top: 14px !important; padding: 14px 0 2px !important; border-top: 1px solid var(--nys-border) !important;
  text-align: center !important; font-size: 13px !important; color: var(--nys-dim) !important;
}
#kc-registration, .pf-v5-c-login__main-footer-band-item { border: 0 !important; margin: 0 !important; padding: 0 !important; }
#kc-info-wrapper, #kc-registration { color: var(--nys-dim) !important; }

/* ===========================================================================
 * Mobile / responsive.
 * ======================================================================== */
@media (max-width: 560px) {
  .pf-v5-c-login, .pf-v5-c-login__container { padding: 18px 14px 24px !important; }
  .pf-v5-c-login__main, .card-pf { max-width: 100% !important; width: 100% !important; padding: 24px 18px !important; }
  #kc-header, #kc-header-wrapper { padding: 18px 12px 10px !important; }
  .kc-logo-text::before { flex-basis: 40px !important; width: 40px !important; height: 40px !important; }
  .kc-logo-text span { font-size: 16px !important; }
  /* 16px inputs prevent iOS focus-zoom */
  .pf-v5-c-form-control > input, #kc-form input[type="text"], #kc-form input[type="email"], #kc-form input[type="password"] { font-size: 16px !important; }
}

/* ---- Respect reduced-motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card-pf, .pf-v5-c-login__main { animation: none !important; }
  .kc-logo-text::before, #kc-login, .pf-v5-c-button.pf-m-primary, a, input, .pf-v5-c-form-control, .pf-v5-c-input-group { transition: none !important; }
}