/* Temptera brand overlay — LOGIN PAGE ONLY.
   Every rule is scoped under .cat__pages__login so the dashboard is untouched.
   Tokens from temptera.com design system (Open Design project). */

.cat__pages__login {
  --t-bg: #ffffff;
  --t-border: #e3e7ec;
  --t-fg: #101720;
  --t-fg-muted: #55606c;
  --t-primary: hsl(0 84% 45%);
  --t-primary-dim: hsl(0 84% 38%);
  --t-primary-soft: hsl(0 84% 45% / 0.08);
  --t-primary-edge: hsl(0 84% 45% / 0.22);
  --t-gradient-crimson: linear-gradient(135deg, hsl(0 84% 48%), hsl(0 74% 40%));
  --t-shadow-crimson: 0 6px 18px hsl(0 84% 45% / 0.22);
  --t-shadow-card: 0 1px 2px hsl(215 25% 20% / 0.06), 0 10px 30px hsl(215 25% 20% / 0.08);
  --t-radius: 0.75rem;
  --t-font-display: 'Outfit', system-ui, sans-serif;
  --t-font-body: 'Space Grotesk', system-ui, sans-serif;

  background: var(--t-bg) !important;
  font-family: var(--t-font-body);
  position: relative;
}

/* Signature visual: one quiet red glow behind the card (site's --gradient-glow) */
.cat__pages__login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 640px 420px at 50% 38%, hsl(0 84% 45% / 0.07), transparent 70%);
  pointer-events: none;
}

/* Card */
.cat__pages__login .cat__pages__login__block__inner {
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-card);
  padding: 2.4rem 2.2rem 2rem;
  position: relative;
  animation: t-card-in 0.45s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes t-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cat__pages__login .cat__pages__login__block__inner { animation: none; }
}

/* Logo: hide the template's SOA UI image, show the Temptera wordmark */
.cat__pages__login .cat__pages__login__block__form h4 a {
  display: block;
  height: 38px;
  margin: 0 auto 14px;
  background: url(/temptera-logo.svg) center / contain no-repeat;
}
.cat__pages__login .cat__pages__login__block__form h4 a img { display: none; }

/* Heading */
.cat__pages__login .cat__pages__login__block__form h4 strong {
  display: block;
  font-family: var(--t-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--t-fg-muted);
}

/* Labels */
.cat__pages__login .form-label {
  font-family: var(--t-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--t-fg-muted);
}

/* Inputs */
.cat__pages__login .form-control {
  font-family: var(--t-font-body);
  color: var(--t-fg);
  border: 1px solid var(--t-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.85rem;
  height: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cat__pages__login .form-control:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px var(--t-primary-soft);
  outline: none;
}
.cat__pages__login .form-control::placeholder { color: #9aa4af; }

/* Links (Forgot Password) — site red instead of template blue */
.cat__pages__login a.cat__core__link--blue {
  color: var(--t-primary) !important;
  border-bottom: 1px solid var(--t-primary-edge);
  text-decoration: none;
}
.cat__pages__login a.cat__core__link--blue:hover { color: var(--t-primary-dim) !important; }

/* Checkbox */
.cat__pages__login .checkbox input[type="checkbox"] { accent-color: var(--t-primary); }
.cat__pages__login .checkbox label {
  font-family: var(--t-font-body);
  color: var(--t-fg-muted);
  font-size: 0.85rem;
}

/* Sign In button — crimson gradient, site shadow */
.cat__pages__login .form-actions .btn {
  display: block;
  width: 100%;
  background: var(--t-gradient-crimson);
  color: #ffffff;
  font-family: var(--t-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 0.5rem;
  padding: 0.7rem 1.6rem;
  box-shadow: var(--t-shadow-crimson);
  transition: filter 0.2s, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.cat__pages__login .form-actions .btn:hover {
  filter: brightness(0.92);
  color: #ffffff;
}
.cat__pages__login .form-actions .btn:active { transform: translateY(1px); }
.cat__pages__login .form-actions { border-top: none; padding-top: 0.25rem; }

/* Loading spinner tint */
.cat__pages__login .block-ui-spinner .loader {
  border-top-color: var(--t-primary) !important;
}

/* Remove the template's gray frame around the login page only.
   :has() keeps this inert on every other route. */
body:has(app-login) { background: #ffffff !important; }
.cat__content:has(app-login) { margin: 0 !important; padding: 0 !important; background: #ffffff; }

/* Replace the template's "Please log in" heading text (baked into the JS bundle) */
.cat__pages__login .cat__pages__login__block__form h4 strong {
  font-size: 0;
  letter-spacing: 0;
}
.cat__pages__login .cat__pages__login__block__form h4 strong::after {
  content: "SOA Management Console";
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}