/* ============================================================
   Foundation login theme
   Pairs with template.ftl (the two-panel shell) + terms.ftl.
   Structure assumed:
     .login-pf-page.fnd-shell
       #kc-header.fnd-hero            <- hero image panel
       .card-pf.fnd-panel            <- content panel (flex column)
         .fnd-marquee                <- EARLY ACCESS strip (hidden on some pages)
         .fnd-card                   <- centered content
           header.fnd-header         <- logo + heading
           #kc-content               <- form / alerts
           footer.fnd-footer         <- "Learn more about Foundation"

   Per-page variation is keyed off body[data-page-id="login-<pageId>"].
   ============================================================ */

/* ========================= FONTS ========================= */
@font-face { font-family: "InterTight"; font-weight: 400;
  src: url("https://dashboard-cdn.azureedge.net/dashboard-assets/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "InterTight"; font-weight: 500;
  src: url("https://dashboard-cdn.azureedge.net/dashboard-assets/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "InterTight"; font-weight: 600;
  src: url("https://dashboard-cdn.azureedge.net/dashboard-assets/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "InterTight"; font-weight: 700;
  src: url("https://dashboard-cdn.azureedge.net/dashboard-assets/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "InterTight"; font-weight: 800;
  src: url("https://dashboard-cdn.azureedge.net/dashboard-assets/inter-tight-latin-800-normal.woff2") format("woff2"); }

/* ========================= BASE ========================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: "InterTight", Arial, sans-serif; font-size: 16px; color: #1f1f1f; }
.login-pf body { background-color: #000; }

/* ===================== PAGE / SHELL ====================== */
/* Full-bleed two-panel split with a thin dark seam between panels. */
.fnd-shell {
  display: flex;
  height: 100vh;
  align-items: stretch;
  padding: 4px;
  gap: 4px;
  background: #000;
}
/* min-width:0 is required: the marquee's nowrap text would otherwise give the
   panel a huge min-content width and squeeze the hero to zero. */
.fnd-shell > * { flex: 1 1 0; min-width: 0; min-height: 0; }

/* ===================== LEFT: HERO ======================== */
#kc-header.fnd-hero {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;                /* anchors the rotating icon layer below */
  /* Brand gradient backdrop (CSS, no asset). The document-swirl rides on ::before. */
  background: linear-gradient(54.83deg, #ffa5ec 0%, #fef95d 100%);
}
/* Transparent document-swirl (WebP w/ alpha, CDN-hosted) slowly rotating clockwise for
   subtle ambient motion. */
#kc-header.fnd-hero::before {
  content: "";
  position: absolute;
  inset: -50%;
  transform: rotate(0deg);
  transform-origin: center center;
  background: url("https://dashboard-cdn.azureedge.net/dashboard-assets/bg-signin-icons_f.webp") no-repeat center center;
  background-size: 72%;
  animation: fnd-hero-spin 90s linear infinite;
  pointer-events: none;
}
@keyframes fnd-hero-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Respect users who opt out of motion: hold the swirl still. */
@media (prefers-reduced-motion: reduce) {
  #kc-header.fnd-hero::before { animation: none; }
}
#kc-header-wrapper, .kc-logo-text { display: none !important; }

/* ===================== RIGHT: PANEL ====================== */
/* Transparent column on the black shell: the marquee bar and the white card
   are separate rounded elements with a 4px black gap between them. */
.card-pf.fnd-panel {
  margin: 0;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  overflow: visible;
}

/* ===================== MARQUEE =========================== */
/* Standalone rounded bar (black gap above from shell padding, below from panel gap). */
.fnd-marquee {
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
  background: linear-gradient(95deg, #f2c1e3 0%, #fff66a 100%);
}
.fnd-marquee__track {
  display: inline-flex;
  animation: fnd-marquee-scroll 30s linear infinite;
}
.fnd-marquee__group {
  display: inline-block;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #1f1f1f;
}
@keyframes fnd-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fnd-marquee__track { animation: none; }
}

/* ===================== CARD (centered) =================== */
/* The white rounded box. Content vertically centered; footer pinned to bottom. */
.fnd-card {
  position: relative;
  flex: 1 1 auto;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 64px 40px 80px;
  overflow-y: auto;
}
.fnd-card > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ===================== HEADER (logo + heading) =========== */
/* The .login-pf-page prefix is required to outrank PatternFly's
   `.login-pf-page .login-pf-header { flex-direction: column }` (0,2,0). */
.login-pf-page header.fnd-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-align: left;
  margin: 0 auto 28px;
}
.fnd-logo { display: block; width: 56px; height: 56px; flex: 0 0 56px; }
.fnd-heading-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
#kc-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.25px;
  color: #1f1f1f;
}
.fnd-subtitle { margin: 0; font-size: 15px; line-height: 1.4; color: #6b6b6b; }

/* ===================== FORM FIELDS ======================= */
#kc-content, #kc-content-wrapper { width: 100%; }
.form-group { margin-bottom: 16px; }
.pf-c-form__label, label[for="username"], label[for="otp"] {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #6b6b6b;
}
.pf-c-form-control,
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  height: 52px;
  background: #f2f2f2;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 16px;
  font-family: "InterTight", Arial, sans-serif;
  font-size: 16px;
  color: #1f1f1f;
  line-height: normal;
}
.pf-c-form-control::placeholder { color: #9a9a9a; }
.pf-c-form-control:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  outline: none;
  border-color: #3ba4f4;
  box-shadow: 0 0 0 1px #3ba4f4;
}
/* Error state: PatternFly otherwise paints a repeating "!" icon background
   (it tiles because our solid background reset its size/repeat). Suppress it
   and use a clean red border; the message renders below the field. */
.pf-c-form-control[aria-invalid="true"],
input[aria-invalid="true"] {
  background-image: none !important;
  border-color: #d12d2d;
  box-shadow: none;
}
.pf-c-form-control[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus {
  border-color: #d12d2d;
  box-shadow: 0 0 0 1px #d12d2d;
}
.pf-c-form__helper-text.pf-m-error,
#input-error, span[id$="input-error"] {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #d12d2d;
}

/* ===================== PRIMARY BUTTON ==================== */
#kc-form-buttons { margin-top: 8px; }
.pf-c-button.pf-m-primary,
#kc-login, #kc-accept {
  display: block;
  width: 100%;
  padding: 15px 24px;
  background: #44bdf9;
  color: #0a0a0a;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  font-family: "InterTight", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
/* Hover matches the default theme: blue -> light-blue gradient. */
.pf-c-button.pf-m-primary:hover,
#kc-login:hover, #kc-accept:hover {
  background: linear-gradient(128deg, #44bdf9 17.82%, #a3d8f2 71.74%);
}

/* ===================== FOOTER LINK ======================= */
/* Pinned to the bottom of the white card; content above stays centered. */
footer.fnd-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 40px 32px; text-align: center; }
footer.fnd-footer a {
  font-size: 14px;
  font-weight: 600;
  color: #1f1f1f;
  text-decoration: none;
}
/* Only the label text is underlined; the trailing arrow icon is not. */
footer.fnd-footer .fnd-learn-text { text-decoration: underline; text-underline-offset: 2px; }
footer.fnd-footer .fnd-learn-arrow { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
footer.fnd-footer a:hover { color: #000; }

/* ===================== TERMS SCREEN ====================== */
/* Image moves to the right; no marquee on this page. */
body[data-page-id="login-terms"] #kc-header.fnd-hero {
  order: 2;
  flex: 0 0 35.5%;
  /* Grapes hero, CDN-hosted (green matches the artwork's backdrop as a fallback). */
  background:
    url("https://dashboard-cdn.azureedge.net/dashboard-assets/bg-terms_f.webp") no-repeat center center,
    #5afda5;
  background-size: cover;
}
/* The signin document-swirl must not bleed onto the Terms grapes hero. */
body[data-page-id="login-terms"] #kc-header.fnd-hero::before { content: none; }
body[data-page-id="login-terms"] .fnd-marquee { display: none; }
body[data-page-id="login-terms"] .fnd-footer { display: none; }
body[data-page-id="login-terms"] .fnd-card { justify-content: flex-start; padding: 56px 40px 40px; }
body[data-page-id="login-terms"] .fnd-card > * { max-width: 480px; }
body[data-page-id="login-terms"] header.fnd-header { margin-bottom: 16px; }
body[data-page-id="login-terms"] #kc-page-title { display: none; }
/* Fill the card so the terms box grows and the buttons pin to the bottom. */
body[data-page-id="login-terms"] #kc-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
body[data-page-id="login-terms"] #kc-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.fnd-terms-title { flex: 0 0 auto; margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 20px; color: #1f1f1f; }
.fnd-terms-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 12px 24px 12px 12px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.8);
}
.fnd-terms-box p { margin: 0 0 14px; }
#kc-terms-text p { color: rgba(0, 0, 0, 0.8); }
#kc-terms-text .tos-updated { color: #6b6b6b; }
.fnd-terms-box .tos-title { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.fnd-terms-box .tos-updated { margin: 0 0 16px; font-size: 13px; color: #6b6b6b; }
.fnd-terms-box ol.tos-sections,
.fnd-terms-box ol.tos-sub { list-style: none; padding-left: 0; margin: 8px 0 14px; }
.fnd-terms-box ol.tos-sub { margin: 8px 0 0; padding-left: 14px; }
.fnd-terms-box ol.tos-sections > li { margin-bottom: 14px; }
.fnd-terms-box li { margin-bottom: 8px; }
.fnd-terms-box a { color: #2f80c4; text-decoration: underline; }
.fnd-terms-box strong { font-weight: 600; }
.fnd-terms-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
/* Compact buttons in the bottom corners (override the full-width primary rule). */
.fnd-terms-actions #kc-decline,
.fnd-terms-actions #kc-accept {
  width: auto;
  flex: 0 0 auto;
  min-width: 80px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}
/* Decline = outline/secondary */
#kc-decline, .pf-c-button.btn-default {
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  padding: 14px 28px;
  font-family: "InterTight", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
#kc-decline:hover, .pf-c-button.btn-default:hover { background: #f2f2f2; }

/* ===================== OTP CODE SCREEN =================== */
/* Provider's login-email-otp.ftl (overridden) — code entry + resend. */
.fnd-otp-title { margin: 0 0 8px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; color: #1f1f1f; }
.fnd-otp-intro { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #6b6b6b; }
#email-otp {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.4em;
}
.fnd-trust-device { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: #6b6b6b; }
.fnd-trust-device input { width: auto; }
.fnd-trust-device label { margin: 0; }
/* Resend = secondary/outline (no PF color modifier is applied to it) */
#kc-resend-email {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 15px 24px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  font-family: "InterTight", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
#kc-resend-email:hover { background: #f2f2f2; }

/* ===================== ALERTS ============================ */
.pf-c-alert { margin-bottom: 16px; padding: 12px 16px; border-radius: 4px; font-size: 14px; }
.pf-c-alert.pf-m-danger { background: #fde8e8; color: #9b1c1c; }
.pf-c-alert.pf-m-warning { background: #fef3c7; color: #92400e; }
.pf-c-alert.pf-m-success { background: #def7ec; color: #03543f; }
.pf-c-alert.pf-m-info { background: #e1effe; color: #1e429f; }
.pf-c-alert__icon { display: none; }

/* Hide stock chrome we don't use */
#kc-select-try-another-way-form, .subtitle, #kc-username { display: none !important; }

/* ===================== RESPONSIVE (mobile) =============== */
/* Hero stacks on top; logo + heading center; marquee sits between them. */
@media (max-width: 768px) {
  .fnd-shell { flex-direction: column; height: 100vh; }
  .fnd-shell > * { flex: none; width: 100%; }

  #kc-header.fnd-hero { flex: 0 0 auto; height: 25vh; min-height: 150px; order: 0 !important; }
  body[data-page-id="login-terms"] #kc-header.fnd-hero { order: 0 !important; }

  .card-pf.fnd-panel { flex: 1 1 auto; }
  .fnd-card { justify-content: flex-start; padding: 32px 24px; }

  .login-pf-page header.fnd-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 24px;
  }
  .fnd-heading-wrap { align-items: center; text-align: center; }
  #kc-page-title { font-size: 22px; }

  body[data-page-id="login-terms"] .fnd-marquee { display: none; }
}