/* Lightweight Helder.Academy branding for shared Frappe shells. */
:root {
  --ha-emerald: #51c878;
  --ha-emerald-hover: #337f50;
  --ha-emerald-deep: #047857;
  --ha-focus: #286940;
  --ha-ink: #101913;
  --ha-forest: #141e17;
  --ha-off-white: #f9fbfa;
  --ha-border: #e9f1ec;
  --ha-gradient: linear-gradient(90deg, var(--ha-emerald-hover), var(--ha-emerald-deep));
  --ha-shadow-emerald: 0 12px 24px -6px rgb(81 200 120 / 30%);
  --ha-font: "InterVar", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.navbar-home img[src*="helder_academy"],
.page-card-head img[src*="helder_academy"] {
  width: auto;
  max-height: 36px;
  object-fit: contain;
}

.for-login .page-card-head img[src*="helder_academy"] {
  width: min(280px, 80vw);
  max-width: 100%;
  max-height: 64px;
}

.for-login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgb(81 200 120 / 16%), transparent 28rem),
    linear-gradient(145deg, #ffffff 0%, var(--ha-off-white) 64%);
  font-family: var(--ha-font);
}

.for-login .page-card {
  overflow: hidden;
  border: 1px solid var(--ha-border);
  border-radius: 2rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 28px 70px -30px rgb(16 25 19 / 38%);
}

.for-login .btn-primary {
  color: #ffffff;
  border-color: transparent;
  background: var(--ha-gradient);
  box-shadow: var(--ha-shadow-emerald);
}

.for-login .btn-primary:hover,
.for-login .btn-primary:focus {
  color: #ffffff;
  border-color: transparent;
  background: var(--ha-gradient);
  opacity: 0.94;
  transform: translateY(-1px);
}

.for-login :is(a, button):focus-visible,
.for-login :is(input, .form-control):focus {
  outline: 2px solid var(--ha-focus);
  outline-offset: 2px;
  border-color: var(--ha-focus);
  box-shadow: 0 0 0 4px rgb(81 200 120 / 20%);
}

html[data-theme="dark"] .for-login {
  --ha-focus: #7bd99a;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 8%, rgb(81 200 120 / 18%), transparent 28rem),
    var(--ha-forest);
}

html[data-theme="dark"] .for-login .page-card {
  color: #ffffff;
  border-color: rgb(255 255 255 / 10%);
  background: rgb(27 40 30 / 96%);
  box-shadow: 0 28px 70px -30px rgb(0 0 0 / 70%);
}

html[data-theme="dark"] .for-login :is(.page-card, .page-card-body) :is(h1, h2, h3, label) {
  color: #ffffff;
}

@media (max-width: 767px) {
  .for-login .page-card {
    border-radius: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .for-login * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}