/*
 * ChemTunes login theme — CSS overrides for Keycloak 26 (keycloak base theme)
 * Light theme with ChemTunes / MN-AM branding.
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --ct-accent:        #17a2b8;   /* teal – primary action colour              */
  --ct-accent-dark:   #117a8b;   /* teal darker – hover / active              */
  --ct-accent-light:  #d1ecf1;   /* teal tint – focus ring background         */
  --ct-navy:          #1a2f45;   /* dark navy – header background             */
  --ct-navy-dark:     #0d1b2a;   /* deeper navy – header gradient bottom      */
  --ct-text:          #212529;   /* near-black body text                      */
  --ct-text-muted:    #6c757d;   /* muted text                                */
  --ct-border:        #ced4da;   /* input border                              */
  --ct-bg:            #f4f6f8;   /* page background                           */
  --ct-card-bg:       #ffffff;   /* login card background                     */
  --ct-radius:        6px;       /* shared border-radius                      */
  --ct-shadow:        0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ── Global / body ─────────────────────────────────────────────────────────── */
.login-pf,
.login-pf body {
  font-family: 'Roboto', sans-serif;
  background: var(--ct-bg) !important;
  background-image: none !important;
  color: var(--ct-text);
  min-height: 100vh;
}

/* ── Page-level wrapper ────────────────────────────────────────────────────── */
.login-pf-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 0;
}

/* ── Header / logo band ────────────────────────────────────────────────────── */
#kc-header {
  width: 100%;
  background: linear-gradient(160deg, var(--ct-navy) 0%, var(--ct-navy-dark) 100%);
  color: #ffffff;
  padding: 32px 24px 28px;
  text-align: center;
  overflow: visible;
}

#kc-header-wrapper {
  font-size: 0;        /* hide the default realm-name text */
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
}

/* Logo image */
div.kc-logo-text {
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 280px;
  height: 72px;
  margin: 0 auto 12px;
}

div.kc-logo-text span {
  display: none;
}

/* Product name text below logo */
#kc-header-wrapper::after {
  content: 'ChemTunes \2022 ToxGPS';
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

.kc-realm-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ── Login card ────────────────────────────────────────────────────────────── */
.card-pf {
  background: var(--ct-card-bg);
  border-top: 3px solid var(--ct-accent);
  border-radius: 0 0 var(--ct-radius) var(--ct-radius);
  box-shadow: var(--ct-shadow);
  max-width: 460px;
  width: 100%;
  padding: 32px 36px 24px;
  margin: 0 auto;
}

/* ── Form labels ───────────────────────────────────────────────────────────── */
.pf-c-form__label,
.control-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ct-text);
}

/* ── Inputs ────────────────────────────────────────────────────────────────── */
.pf-c-form-control,
input.form-control {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 8px 12px;
  color: var(--ct-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-c-form-control:focus,
input.form-control:focus {
  border-color: var(--ct-accent);
  box-shadow: 0 0 0 3px var(--ct-accent-light);
  outline: none;
}

/* Invalid fields: keep the error state, but suppress PatternFly's red
   exclamation-mark background icon, which clashes with the clean theme. */
.pf-c-form-control[aria-invalid="true"],
input.form-control[aria-invalid="true"] {
  background-image: none !important;
  background-repeat: no-repeat !important;
  border-color: #dc3545;
}

.pf-c-form-control[aria-invalid="true"]:focus,
input.form-control[aria-invalid="true"]:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

/* ── Primary button ────────────────────────────────────────────────────────── */
.btn-primary,
.pf-c-button.pf-m-primary {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--ct-accent) !important;
  border-color: var(--ct-accent) !important;
  color: #ffffff !important;
  border-radius: var(--ct-radius);
  padding: 9px 20px;
  letter-spacing: 0.3px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus {
  background-color: var(--ct-accent-dark) !important;
  border-color: var(--ct-accent-dark) !important;
  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.35);
}

/* ── Links ─────────────────────────────────────────────────────────────────── */
a,
.login-pf a,
.login-pf a:visited {
  color: var(--ct-accent);
}

.login-pf a:hover {
  color: var(--ct-accent-dark);
  text-decoration: underline;
}

/* ── Form title (e.g. "Sign In") ───────────────────────────────────────────── */
h1#kc-page-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ct-text);
  margin-bottom: 20px;
}

/* ── "Remember me" / checkbox text ────────────────────────────────────────── */
#kc-form-options .checkbox label,
#kc-form-options label {
  font-size: 13px;
  color: var(--ct-text-muted);
}

/* ── Info / footer band ────────────────────────────────────────────────────── */
#kc-info-wrapper {
  font-size: 13px;
  color: var(--ct-text-muted);
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 12px 24px;
}

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.pf-c-alert.pf-m-danger,
.alert-error {
  border-left: 4px solid #dc3545;
  background: #fff5f5;
  border-radius: var(--ct-radius);
}

.pf-c-alert.pf-m-warning,
.alert-warning {
  border-left: 4px solid #ffc107;
  background: #fffbf0;
  border-radius: var(--ct-radius);
}

.pf-c-alert.pf-m-success,
.alert-success {
  border-left: 4px solid #28a745;
  background: #f4fff7;
  border-radius: var(--ct-radius);
}

/* ── Locale dropdown ───────────────────────────────────────────────────────── */
#kc-locale-dropdown a,
#kc-locale-dropdown button {
  color: var(--ct-accent);
  font-size: 13px;
}

/* ── Responsive tweaks ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .login-pf body,
  .login-pf {
    background: var(--ct-bg) !important;
  }

  #kc-header {
    padding: 24px 16px 20px;
  }

  div.kc-logo-text {
    width: 200px;
    height: 52px;
  }

  .card-pf {
    border-radius: 0;
    border-top: 3px solid var(--ct-accent);
    box-shadow: none;
    padding: 24px 20px;
  }
}