/* ==========================================================================
   copytonet custom Keycloak login theme
   Extends keycloak.v2 — overrides colors only, layout stays default.
   Palette pulled from index.html's --bg-color / --button-bg-color etc.
   ========================================================================== */

:root {
  --ct-bg: #121212;
  --ct-container-bg: #1f1f1f;
  --ct-text: #e0e0e0;
  --ct-input-bg: #2a2a2a;
  --ct-input-border: #444;
  --ct-input-text: #e0e0e0;
  --ct-button-bg: #6200EE;
  --ct-button-text: #ffffff;
  --ct-button-hover-bg: #3700B3;
  --ct-hr: #666;
  --ct-error: #ff5c5c;
}

/* Page background */
body,
.pf-v5-c-login,
.pf-v5-c-background-image {
  background-color: var(--ct-bg) !important;
}

/* Card / form container */
#kc-header,
#kc-content-wrapper,
.pf-v5-c-login__main,
.pf-v5-c-login__main-body,
.pf-v5-c-card,
.card-pf {
  background-color: var(--ct-container-bg) !important;
  color: var(--ct-text) !important;
  border-radius: 8px;
}

/* Headings and body text */
#kc-header-wrapper,
#kc-page-title,
.pf-v5-c-login__header,
.pf-v5-c-title,
label,
.pf-v5-c-form__label-text {
  color: var(--ct-text) !important;
}

/* Text inputs */
input[type="text"],
input[type="password"],
input[type="email"],
.pf-v5-c-form-control {
  background-color: var(--ct-input-bg) !important;
  color: var(--ct-input-text) !important;
  border: 1px solid var(--ct-input-border) !important;
  border-radius: 4px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
.pf-v5-c-form-control:focus {
  border-color: var(--ct-button-bg) !important;
  box-shadow: 0 0 0 1px var(--ct-button-bg) !important;
}

/* Remove PatternFly's bottom underline indicator (the white/blue hover line) */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control:hover::after,
.pf-v5-c-form-control:focus::after,
.pf-v5-c-form-control:focus-within::after,
.pf-v5-c-input-group::after,
.pf-v5-c-input-group__item::after,
.pf-v5-c-button.pf-m-control::after,
.pf-v5-c-button.pf-m-control:hover::after,
.pf-v5-c-button.pf-m-control:focus::after {
  border-bottom: none !important;
  border-width: 0 !important;
  content: none !important;
}

/* Primary button (Sign In / Register / Submit) */
.pf-v5-c-button.pf-m-primary,
#kc-login,
#kc-register,
input[type="submit"] {
  background-color: var(--ct-button-bg) !important;
  color: var(--ct-button-text) !important;
  border: none !important;
  border-radius: 4px !important;
  transition: background-color 0.3s;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover,
#kc-register:hover,
input[type="submit"]:hover {
  background-color: var(--ct-button-hover-bg) !important;
}

/* Footer band ("New user? Register" area at bottom of card) */
.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item,
#kc-info-wrapper,
#kc-registration-container {
  background-color: var(--ct-container-bg) !important;
  color: var(--ct-text) !important;
}

/* Plain (non-link) text inside the footer band, e.g. "New user?" */
.pf-v5-c-login__main-footer-band-item,
.pf-v5-c-login__main-footer-band-item * :not(a) {
  color: var(--ct-text) !important;
}

/* Links (forgot password, register, back to login) */
a,
#kc-info-wrapper a,
.pf-v5-c-login__main-footer-links a {
  color: var(--ct-button-bg) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--ct-button-hover-bg) !important;
}

/* Divider lines */
hr,
.pf-v5-c-divider {
  border-color: var(--ct-hr) !important;
}

/* Error / alert messages (bad password, etc.) */
.pf-v5-c-alert.pf-m-danger,
.alert-error,
#input-error {
  color: var(--ct-error) !important;
}

/* Checkboxes (remember me) */
input[type="checkbox"] {
  accent-color: var(--ct-button-bg);
}

/* ==========================================================================
   Layout: stack the brand header above the login card instead of side-by-side
   Real markup: .pf-v5-c-login__container holds <header id="kc-header"> and
   <main class="pf-v5-c-login__main"> as flex siblings — force them to stack.
   ========================================================================== */
.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 800px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

#kc-header.pf-v5-c-login__header {
  width: 100%;
  max-width: 100%;
}

.pf-v5-c-login__main {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Style the brand/name panel like index.html's .site-header, pinned to top */
#kc-header-wrapper.pf-v5-c-brand {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  box-sizing: border-box;
  background-color: var(--ct-container-bg) !important;
  color: var(--ct-text) !important;
  padding: 15px 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  font-size: 22px !important;
  font-weight: bold !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: Arial, sans-serif !important;
  line-height: 31px;
}

/* Constrain the login card to a sensible fixed width instead of stretching full-width */
.pf-v5-c-login__main-body {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  box-sizing: border-box;
}

.pf-v5-c-login__main-header {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  box-sizing: border-box;
}