/**
 * ERPAL Login Brand — the tenant's sign-in surface.
 *
 * SCOPE: every rule is under `body.erpal-login-brand`, a class this module adds
 * itself. It is deliberately not `body.gin-login` (gin_login's own class) — this
 * file has to OVERRIDE gin_login, and several of its rules are byte-for-byte as
 * specific as gin_login's, so the win comes from source order (the library is
 * weighted late), not from borrowing gin_login's hook. Using our own class also
 * means nothing here fires on a page gin_login is not rendering.
 *
 * THAT ONLY WORKS AGAINST GIN_LOGIN. Gin itself is a different opponent: its
 * component rules are wrapped in `:is(#extra-specificity-hack, …)`, so they carry
 * ID specificity and nothing class-based here can outrank them. Anything Gin
 * owns is therefore set through Gin's own custom properties, not by writing a
 * competing rule. Which of the two applies to a given property is not guessable
 * from the source — every declaration in this file was checked against
 * getComputedStyle on the live page, and the ones that lost were deleted rather
 * than left in looking authoritative.
 *
 * COLOURS: the six values a tenant can change arrive as custom properties on
 * :root, emitted per-request from erpal_login_brand.settings. Everything else is
 * a literal here, lifted from erpal_crm_ui/css/erpal-tokens.css so the sign-in
 * page and the cockpit behind it are the same design system rather than two
 * things that happen to both be blue.
 *
 * DAY / NIGHT: the cockpit follows the OS when no theme is forced, and this page
 * now does the same. Gin ships a complete dark variable set but only applies it
 * under a `.gin--dark-mode` class that is added by JavaScript from a Gin setting
 * which is OFF on this site — so the page could never go dark on its own. Rather
 * than re-style Gin's components, the Night block below re-declares GIN'S OWN
 * dark values on this page: Gin's CSS reads those properties, so its form
 * elements, buttons and messages follow without this file knowing how they are
 * built. Verified by rendering the page under an emulated dark preference, not
 * by reading the stylesheet.
 */

/* ==================================================================
   DAY
   ================================================================== */
body.erpal-login-brand {
  /* cockpit tokens (erpal_crm_ui) */
  --erpal-surface: #ffffff;
  --erpal-text: #1f2733;
  --erpal-muted: #5f6b7a;
  --erpal-border: #e6e9ee;
  --erpal-input-bg: #ffffff;
  --erpal-radius: 8px;

  /* tenant values, with the shipped defaults as the fallback half of var() so
     this file still renders correctly if the inline block never arrives */
  --erpal-accent: var(--erpal-login-accent, #1a73e8);
  --erpal-accent-dark: var(--erpal-login-accent-dark, #1559b8);
  --erpal-on-accent: #ffffff;
  --erpal-eyebrow: var(--erpal-login-eyebrow, #f97316);
  --erpal-panel-from: var(--erpal-login-panel-from, #0e1b2e);
  --erpal-panel-to: var(--erpal-login-panel-to, #15263f);
  --erpal-panel-glow: var(--erpal-login-panel-glow, #f97316);

  /* HAND THE ACCENT TO GIN — this is the mechanism, not a convenience.
     Gin defends its component styles with an ID-specificity hack:
     `:is(#extra-specificity-hack, [data-drupal-admin-styles]) .button--primary`
     is (1,1,0), and the Log in button's own rule matches `#edit-submit` on top
     of that, reaching (2,1,0). No class-based selector in this file can outrank
     that, and an earlier draft of it tried — the rules parsed, looked right in
     the file and painted nothing. What Gin's rules DO read is these variables,
     so setting them is how this page gets its colours; overriding Gin's
     selectors is how it does not. Verified by reading computed styles off the
     live button, not by reading this stylesheet. */
  --gin-color-primary: var(--erpal-accent);
  --gin-color-primary-hover: var(--erpal-accent-dark);
  --gin-color-primary-active: var(--erpal-accent-dark);
  --gin-color-button-text: var(--erpal-on-accent);

  color-scheme: light;
  background: var(--erpal-surface);
}

/* ==================================================================
   NIGHT — OS preference, and Gin's forced dark class if it is ever enabled.
   The two blocks are duplicates because CSS has no mixins without a build step;
   keep them in sync (same note as erpal-tokens.css).
   ================================================================== */
@media (prefers-color-scheme: dark) {
  body.erpal-login-brand {
    --erpal-surface: #161c2c;
    --erpal-text: #e8ecf4;
    --erpal-muted: #9aa5b8;
    --erpal-border: #28304a;
    --erpal-input-bg: #0e1320;

    /* ACCENT-AS-INK is lifted for Night, the way the cockpit lifts its own
       (#1a73e8 -> #5b9bff in erpal-tokens.css). Done by formula rather than by a
       second config key: a 70/30 mix toward white takes the shipped #1a73e8 to
       ~#5e9def, which is the cockpit's Night blue to the eye, and a tenant that
       sets a different accent gets the same treatment for free. */
    --erpal-accent: color-mix(in srgb, var(--erpal-login-accent, #1a73e8) 70%, #ffffff);
    --erpal-accent-dark: color-mix(in srgb, var(--erpal-login-accent, #1a73e8) 85%, #ffffff);

    /* THE BUTTON'S INK FLIPS WITH IT, and that is the whole reason the lift is
       safe. Measured: white on the lifted #5e9def is 2.8:1 — under AA, and under
       even the 3:1 large-text floor — on the Log in button, which is the one
       control this page exists to offer. Dark ink on the same blue is 6.2:1, and
       the lifted blue as LINK text on the #161c2c column is 5.6:1, so both roles
       pass by lifting the accent and inverting the ink rather than by keeping
       two accents. It is also what Gin does in its own dark mode
       (--gin-color-button-text: #111); this just uses the cockpit's near-black
       navy instead of a neutral. */
    --erpal-on-accent: #0e1320;

    /* Gin's own Night values (themes/contrib/gin/dist/css/theme/variables.css,
       .gin--dark-mode). Re-declared, not invented. */
    --gin-color-title: #fff;
    --gin-color-text: #d2d3d3;
    --gin-color-text-light: #9e9fa0;
    --gin-color-focus: rgb(81, 168, 255);
    --gin-color-focus-border: rgba(0, 0, 0, .8);
    --gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);
    --gin-color-disabled: #919191;
    --gin-color-disabled-border: #646464;
    --gin-color-disabled-bg: #47474c;
    --gin-color-danger: #ce6060;
    --gin-color-danger-lightest: #483439;
    --gin-color-green: #32cea4;
    --gin-color-info: #559bca;
    --gin-bg-app: #0e1320;
    --gin-bg-layer: #161c2c;
    --gin-bg-layer2: #1d2438;
    --gin-bg-layer3: #28304a;
    --gin-bg-layer4: #0b101a;
    --gin-bg-input: #0e1320;
    --gin-bg-secondary: #0e1320;
    --gin-border-color: #28304a;
    --gin-border-color-secondary: rgba(255, 255, 255, .075);
    --gin-border-color-layer2: #3a4360;
    --gin-border-color-form-element: #3a4360;
    --gin-status-text: #c3cbd0;
    --gin-status-bg: rgba(255, 255, 255, .12);
    --gin-status-danger-text: #e69e9e;
    --gin-status-danger-bg: rgba(222, 117, 96, .15);
    --gin-status-warning-text: #e8d185;
    --gin-status-warning-bg: rgba(226, 151, 0, .15);
    --gin-status-success-text: #8bd3b1;
    --gin-status-success-bg: #26a76940;
    --gin-icon-color: #9aa5b8;

    color-scheme: dark;
  }
}

/* ==================================================================
   THE FORM COLUMN
   ================================================================== */
body.erpal-login-brand .user-form-page {
  background: var(--erpal-surface);
}

/* The column is a wrapping flex container with two full-width rows — the header
   holding the mark, then everything else — and gin_login leaves align-content at
   its default `stretch`. On a SHORT form the leftover vertical space is therefore
   dealt out to both rows, and the mark ends up floating ~200px above the content
   it belongs to. Pre-existing (the unbranded password page did it too), but it
   matters more now: the brand line has to read as one unit with the mark, and on
   /user/password and the one-time-login landing it was reading as an orphan.
   gin_login already applies exactly this fix below 800px; this extends its own
   answer to every width rather than inventing a different one. */
body.erpal-login-brand .user-form-page__user-form {
  align-content: flex-start;
  background: var(--erpal-surface);
  color: var(--erpal-text);
}

/* The mark. gin_login caps every image in this column at 40px; the mark is the
   only image in it, and 44px is the size the cockpit's own sidebar uses. */
body.erpal-login-brand .content-header .toolbar-logo {
  display: inline-flex;
  align-items: center;
}

body.erpal-login-brand .content-header .toolbar-icon-home {
  max-height: 44px;
  width: auto;
}

/* THE DROPLET FLOOR. gin_login draws its default logo as a CSS mask on this
   pseudo-element, so it survives any amount of logo configuration elsewhere.
   Neutralise the mask and give the link its text back, so the worst case on
   this surface is the word "Home" — never another vendor's mark. */
body.erpal-login-brand .toolbar-icon-default::before {
  content: none;
  display: none;
}

body.erpal-login-brand .toolbar-icon-default {
  font-size: .95rem;
  font-weight: 600;
  text-indent: 0;
  color: var(--erpal-muted);
}

/* gin_login pushes a 4rem gap under the header on narrow screens, which on a
   phone puts the brand line most of a screen below the mark. */
@media (max-width: 800px) {
  body.erpal-login-brand .user-form-page .content-header {
    margin-bottom: 1.5rem;
  }
}

/* ---- the brand line (rendered into pre_content by this module) ---- */
body.erpal-login-brand .erpal-login-brand__line {
  margin: 0 0 .25rem;
}

/* The brand line uses the marketing site's own eyebrow treatment (12.8px, 700,
   .14em, brand orange) so the client who clicked "Client Login" over there sees
   the same device here — but DARKENED for Day. Measured: #f97316 on white is
   2.8:1, and at 12.8px this is small text, so it needs 4.5:1. A 72/28 mix toward
   black lands at ~4.7:1 and still reads as the brand orange rather than as
   brown. Night needs no such help: the same orange on the #161c2c column is
   6.1:1 already, so it is used neat there. The mix is applied to whatever the
   tenant configured, so a client edition's own eyebrow colour gets the same
   correction without anybody remembering to do it. */
body.erpal-login-brand .erpal-login-brand__name {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--erpal-eyebrow) 72%, #000000);
}

@media (prefers-color-scheme: dark) {
  body.erpal-login-brand .erpal-login-brand__name {
    color: var(--erpal-eyebrow);
  }
}

body.erpal-login-brand .erpal-login-brand__tagline {
  margin: .35rem 0 0;
  font-size: .95rem;
  color: var(--erpal-muted);
}

/* ---- headings ---- */
body.erpal-login-brand .user-form-page__page-title {
  color: var(--erpal-text);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: .35rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 800px) {
  body.erpal-login-brand .user-form-page__page-title {
    font-size: 2.5rem;
    margin-top: .5rem;
  }
}

/* ---- form controls, on the cockpit's radius and border ---- */
body.erpal-login-brand .user-form-page .form-item__label {
  color: var(--erpal-text);
  font-weight: 600;
  font-size: .9rem;
}

body.erpal-login-brand .user-form-page .form-item__description {
  color: var(--erpal-muted);
}

body.erpal-login-brand .user-form-page .form-element {
  padding: .85rem 1rem;
  border: 1px solid var(--erpal-border);
  border-radius: var(--erpal-radius);
  background: var(--erpal-input-bg);
  color: var(--erpal-text);
  box-shadow: none;
  font-size: 1rem;
}

body.erpal-login-brand .user-form-page .form-element::placeholder {
  color: var(--erpal-muted);
  opacity: .8;
}

body.erpal-login-brand .user-form-page .form-element:hover {
  border-color: var(--erpal-accent);
}

body.erpal-login-brand .user-form-page .form-element:focus {
  border-color: var(--erpal-accent);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erpal-accent) 28%, transparent);
}

/* ---- buttons ---- */
/* Measured on the live button: border-radius, font-weight and letter-spacing
   here DO win. `box-shadow: none` did not — Gin gives the primary button a faint
   tinted shadow from an ID-hacked rule, it looks right, and it stays. */
body.erpal-login-brand .user-form-page .button {
  border-radius: var(--erpal-radius);
  font-weight: 600;
  letter-spacing: .01em;
}

/* NOTE: the primary button's fill and ink are NOT set here. They come from
   --gin-color-primary / --gin-color-button-text at the top of this file, because
   Gin's own rules for that button reach (2,1,0) specificity and no selector here
   can outrank them. Declaring them here as well would be CSS that reads as if it
   were in charge and is silently ignored — the exact thing that made the first
   draft of this file wrong. */

body.erpal-login-brand .user-form-page .register-button {
  margin-top: .75rem;
  padding: .85rem 1rem;
  background: transparent;
  border: 1px solid var(--erpal-border);
  color: var(--erpal-text);
  text-align: center;
}

body.erpal-login-brand .user-form-page .register-button:hover {
  border-color: var(--erpal-accent);
  color: var(--erpal-accent);
}

/* ---- links ---- */
body.erpal-login-brand .user-form-page a,
body.erpal-login-brand .user-form-page .link {
  color: var(--erpal-accent);
}

body.erpal-login-brand .user-form-page .link--more {
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: .95rem;
}

/* ---- the passwordless block (magic_login_link) — styled, never restructured
        (its markup, its field names and its second submit button are exactly as
        that module renders them) ---- */
body.erpal-login-brand .magic-link-separator {
  margin: 2rem 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--erpal-border);
}

body.erpal-login-brand .magic-link-login-wrapper h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--erpal-text);
}

/* ---- status/error messages keep Gin's shapes, just on our surface ---- */
body.erpal-login-brand .user-form-page .messages-list {
  margin-bottom: 1.25rem;
}

/* ==================================================================
   THE BRAND PANEL (the right-hand half)

   gin_login's default here is a random stock photograph downloaded by
   JavaScript. With brand_image.use_default off and no path, the panel renders
   EMPTY and this file fills it: a gradient in the tenant's colours, one glow,
   and the tenant's own mark as a watermark. No image request, nothing to crop,
   and it re-colours from config rather than from a new file.
   ================================================================== */
body.erpal-login-brand .user-form-page__wallpaper {
  position: relative;
  overflow: hidden;
  background-color: var(--erpal-panel-from);
  background-image:
    radial-gradient(120% 130% at 80% 0, color-mix(in srgb, var(--erpal-panel-to) 68%, #4a6a95) 0, transparent 62%),
    linear-gradient(135deg, var(--erpal-panel-from) 0, var(--erpal-panel-to) 100%);
}

/* ---- THE HARD FLOOR: no photograph, whatever the config says ----------------
   The block above assumes `brand_image.use_default` is off, which this module's
   hook_install() sets. That assumption is NOT safe, and it failed in production.

   MEASURED 2026-08-16 on a trial tenant built from erpal_client_project 1.20.3:
   the module was enabled and working -- droplet gone, brand line rendering,
   hasLoginBrandCss true -- and the stock Unsplash mountain photograph was STILL
   THERE, a full 600x1000 panel at opacity 1. gin_login renders the photo as a
   real <img> CHILD of .user-form-page__wallpaper, so re-painting the CONTAINER's
   background does nothing: the image sits on top of it.

   The config half is also fragile by construction. hook_install() runs exactly
   once, and on both provisioning paths a `gin_login.settings.yml` carrying the
   stock `use_default: true` is imported AFTERWARDS -- by `site:install
   --existing-config` on the clawdio line, and by the erpal_core recipe on the
   TMS line. Whichever wins is an ordering accident, and the failure is silent:
   the module reports enabled and the page still shows a stranger's photograph.

   So this is a floor, not a preference, and it is deliberately the same move the
   droplet already gets ("the Drupal mark cannot reappear on this surface even if
   the logo config is later lost"). A tenant that wants a photograph here sets one
   through the panel content, not by losing a config key.                       */
body.erpal-login-brand .user-form-page__wallpaper > img {
  display: none !important;
}

/* the glow — the same move the Lucky Duck marketing hero makes, so the client
   who clicked "Client Login" over there lands on something that matches */
body.erpal-login-brand .user-form-page__wallpaper::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -22%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--erpal-panel-glow) 34%, transparent) 0, transparent 66%);
}

/* ---- the panel's own content (rendered into gin_login's {{ brand_image }}) ---- */
body.erpal-login-brand .erpal-login-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding: 2rem;
  text-align: center;
}

body.erpal-login-brand .erpal-login-panel__mark {
  width: min(38%, 220px);
  aspect-ratio: 1;
  background-image: var(--erpal-login-mark, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
}

body.erpal-login-brand .erpal-login-panel__owner {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* ==================================================================
   RESPONSIVE

   Below 800px gin_login hides the panel entirely, so the phone view is the form
   column alone — it needs the brand to be carried by the mark and the brand
   line, which it is. These rules only stop the column feeling cramped.
   ================================================================== */
@media (max-width: 800px) {
  body.erpal-login-brand .user-form-page .layout-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.erpal-login-brand .user-form-page .content-header {
    padding-top: 1.75rem;
  }
}

@media print {
  body.erpal-login-brand .user-form-page__wallpaper {
    display: none;
  }
}