/*
 * PistaVirtual brand styles for the Casdoor auth pages.
 *
 * Single source of truth for the look of /login and /forget. It ships inside
 * the image (Dockerfile.casdoor copies it to /web/build/static/pv-brand.css)
 * and is linked from index.html by patch 0006, so it survives a clean rebuild
 * of the environment — unlike the per-application formCss / formCssMobile
 * fields, which live only in the DB and had to be pasted into all eight apps.
 *
 * Load order note: CRA's main.<hash>.css and antd's runtime cssinjs <style>
 * tags are both injected into <head> AFTER this link, and several of the
 * rules below fight inline styles hardcoded in upstream's JSX. That is why
 * !important shows up as often as it does — this is an override sheet, not a
 * base sheet. Rules are scoped to .login-content / .forget-content so the
 * admin console is untouched.
 *
 * Everything here is keyed off classes upstream actually renders:
 *   LoginPage.js   -> .login-content, .login-form, .login-languages, ...
 *   ForgetPage.js  -> .forget-content / .forget-content-dark, .panel-logo
 * A Casdoor version bump should re-check those two files.
 */

.login-content,
.forget-content,
.forget-content-dark {
  --pv-logo: url("/static/img/logotipo.svg");
  --pv-ink: #1f1f1f;
  --pv-surface: #fff;
  --pv-rule: rgb(0 0 0 / 15%);
}

.forget-content-dark {
  --pv-ink: #f0f0f0;
  --pv-surface: #333;
  --pv-rule: rgb(255 255 255 / 20%);
}

/* ---------------------------------------------------------------------------
 * Shared: primary button contrast.
 *
 * antd puts white text on primary buttons, which against the brand yellow is
 * about 1.4:1 — unreadable in sunlight. Force dark ink instead (~11.4:1 on
 * #EAD71D). Scoped to the auth pages so the admin console keeps antd's own.
 *
 * The yellow itself is not set here: it comes from themeData.colorPrimary, set
 * per organization and per application in the admin. Keep it at #EAD71D, the
 * logotipo's own yellow — see PATCH_BRAND_CSS.md.
 * ------------------------------------------------------------------------ */
:is(.login-content, .forget-content, .forget-content-dark) .ant-btn-primary {
  color: var(--pv-ink) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Login page. Ported verbatim from the formCss / formCssMobile that was set
 * by hand on each application, so those DB fields can be cleared once this
 * image is deployed. Behaviour is intentionally identical: the Logo signin
 * item stays hidden and the logotipo is painted by .login-form::before, on
 * mobile only.
 * ------------------------------------------------------------------------ */
.login-content .login-languages {
  top: 8px !important;
  right: 8px !important;
}

.login-content .login-username-input {
  padding-right: 12px;
}

/* ---------------------------------------------------------------------------
 * Forget-password page.
 * ------------------------------------------------------------------------ */

/* Anchor for the absolutely positioned back button below. */
:is(.forget-content, .forget-content-dark) {
  position: relative;
}

/*
 * The logo. ForgetPage calls Setting.renderLogo() unconditionally, which emits
 * <img class="panel-logo" src={application.logo}>; LoginPage can hide its Logo
 * signin item, ForgetPage has no such switch. When application.logo is empty or
 * points at a path the image does not ship, the browser renders the alt text in
 * a broken-image frame — which is what dev2 showed, and what applications.json
 * now avoids by pointing every app at logotipo.svg.
 *
 * The content: override stays anyway, because that config lives in the database:
 * a fresh environment, a restored backup or a hand-edited row puts the broken
 * frame straight back, and this sheet exists precisely to survive that. It does
 * brand-lock the mark — if an app ever needs its own logo, drop this line and
 * fix application.logo instead.
 *
 * Caveat: content: on a real element (not a pseudo-element) is a Chromium/WebKit
 * feature, and Firefox only shipped it in 137. On an older Firefox the fallback
 * is the broken frame again, so application.logo staying correct still matters.
 */
:is(.forget-content, .forget-content-dark) .panel-logo {
  content: var(--pv-logo);
  width: 200px !important;
  max-width: 60%;
  height: auto;
}

/*
 * Upstream hardcodes marginTop: 80px on the logo wrapper and on the Steps,
 * plus 40px on the form wrapper — inline, so only !important reaches them.
 * That is ~200px of dead space before the first field on a phone. The
 * wrappers carry no class of their own, hence :has() (Safari 15.4+ /
 * Chrome 105+, fine for the WebViews the mobile apps open).
 */
:is(.forget-content, .forget-content-dark) div:has(> .panel-logo),
:is(.forget-content, .forget-content-dark) div:has(> a > .panel-logo) {
  margin-top: 32px !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps {
  margin-top: 28px !important;
}

:is(.forget-content, .forget-content-dark) div:has(> .ant-form) {
  margin-top: 24px !important;
}

/*
 * Back button: upstream leaves it in flow (position: relative), so it eats a
 * full row above the logo. Lift it out to the top-left corner and give it a
 * 44px touch target.
 */
:is(.forget-content, .forget-content-dark) > .ant-btn {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  z-index: 2;
  min-width: 44px;
  height: 44px;
}

/*
 * Form width. Upstream pins style={{width: "300px"}} on all three step forms.
 * Match the login form's 320px and stay inside the viewport on small phones.
 */
:is(.forget-content, .forget-content-dark) .ant-form {
  width: min(320px, calc(100vw - 48px)) !important;
}

/* ---------------------------------------------------------------------------
 * Compact horizontal stepper.
 *
 * antd's Steps has responsive: true and swaps itself to .ant-steps-vertical on
 * narrow viewports, which on a phone turns three short labels into ~330px of
 * stacked rows. Keying off that class rather than a media query of our own
 * means this tracks antd's breakpoint instead of guessing at it.
 *
 * Note the DOM: this is antd's newer "filled" Steps, NOT the classic one every
 * tutorial shows. There is no .ant-steps-item-container, no -item-tail and no
 * -item-content; the shape is
 *
 *   .ant-steps-item > .ant-steps-item-wrapper
 *                       .ant-steps-item-icon
 *                       .ant-steps-item-section > .ant-steps-item-header
 *                                                   .ant-steps-item-title
 *                                                   .ant-steps-item-rail
 *
 * Verified against the dev2 bundle. Casdoor pins antd 6.3.5 across 3.144.0,
 * 3.154.4 and 3.163.0, so this shape is stable over the current bump — but it
 * is worth re-checking whenever antd itself moves, because rules aimed at the
 * classic class names do not error, they silently match nothing.
 *
 * Result: icons in a row, labels underneath, one hairline connector between
 * them. antd's own connector (.ant-steps-item-rail) lives inside the header
 * next to the title, which is no use once the label moves below the icon, so
 * it is hidden and the line redrawn as ::before on every item after the first —
 * it spans from the previous icon's centre to this one's, and the icon sits on
 * top with a solid background so the line does not cross the glyph. The 16px
 * offset is the measured icon centre (32px tall icon, flush to the top).
 * ------------------------------------------------------------------------ */
:is(.forget-content, .forget-content-dark) .ant-steps-vertical {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical > .ant-steps-item {
  position: relative;
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical > .ant-steps-item + .ant-steps-item::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--pv-rule);
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-icon {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 8px !important;
  background: var(--pv-surface);
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-section {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-header {
  display: block !important;
  padding: 0 !important;
  text-align: center !important;
}

:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-title {
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding-inline-end: 0 !important;
}

/* antd's own connector; we draw our own above. */
:is(.forget-content, .forget-content-dark) .ant-steps-vertical .ant-steps-item-rail {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Mobile.
 *
 * Casdoor decides "mobile" from the user agent (Setting.isMobile), which is
 * what strips .forget-content's padding and shadow inline. We cannot read
 * that from CSS, so the block below keys off viewport width instead — the
 * two agree on phones, and a narrow desktop window only gets a nicer layout.
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .login-content .login-languages {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 1000;
  }

  .login-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login-form::before {
    content: "";
    display: block;
    height: 64px;
    margin: 24px auto 16px;
    background-image: var(--pv-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  :is(.forget-content, .forget-content-dark) {
    padding: 8px 16px 24px !important;
  }

  :is(.forget-content, .forget-content-dark) div:has(> .panel-logo),
  :is(.forget-content, .forget-content-dark) div:has(> a > .panel-logo) {
    margin-top: 48px !important;
    margin-bottom: 4px !important;
  }

  :is(.forget-content, .forget-content-dark) .ant-steps {
    margin-top: 20px !important;
  }

  :is(.forget-content, .forget-content-dark) div:has(> .ant-form) {
    margin-top: 20px !important;
  }

  /*
   * 16px is not a style choice: iOS Safari zooms the viewport on focus for
   * any input below it, which on the WebAuthenticator sheet leaves the user
   * scrolled sideways mid-form. It has to sit on the real <input>, which is
   * what that heuristic reads.
   */
  :is(.forget-content, .forget-content-dark) :is(.ant-input, .ant-select-selector) {
    font-size: 16px !important;
  }

  /*
   * The 48px touch target goes on the OUTER control only, never on the inner
   * <input>. An input with a prefix icon is wrapped in .ant-input-affix-wrapper,
   * and putting the height on both stacks them: 48px inner + the wrapper's
   * 7px/7px padding + border = 64px, measured on dev2. That is what made the
   * "Obtener código" row ragged — a 64px field beside a 48px button inside the
   * same Space.Compact (see common/SendCodeInput.js).
   */
  :is(.forget-content, .forget-content-dark) :is(.ant-input, .ant-input-affix-wrapper, .ant-select-selector) {
    min-height: 48px !important;
  }

  /* ...but never on the inner <input>, or the two stack. */
  :is(.forget-content, .forget-content-dark) .ant-input-affix-wrapper > .ant-input {
    min-height: 0 !important;
  }

  :is(.forget-content, .forget-content-dark) .ant-btn-primary {
    height: 48px !important;
    font-size: 16px !important;
  }
}
