/*
 * Sign-in screen.
 *
 * Hand-written rather than part of the Tailwind bundle: this page has to render for a
 * logged-out visitor before the app exists, and must survive `assets/dist/` not having
 * been built. It is ~200 lines and shares no code with the app, so a build step would
 * buy nothing.
 *
 * The takeover rules are repeated here rather than imported from app.css, because
 * app.css is only enqueued on the dashboard — this page loads neither the React bundle
 * nor its stylesheet.
 *
 * Palette follows the Chase Hardware trade portal's auth screen, so staff moving
 * between the two recognise the front door. Only `--cph-primary` is themeable (from
 * Settings → branding); everything else is fixed, because the dark aside needs a
 * contrast relationship the brand picker can't be trusted to preserve.
 */

/*
 * This page renders through its own standalone template, so there is no theme markup
 * to hide — an earlier version tried to hide the theme's wrapper and hid its own
 * markup with it, producing a blank page. Nothing here should ever hide an ancestor.
 */
body.cph-auth {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
}

body.cph-auth #wpadminbar { display: none !important; }

body.cph-auth .cph-auth-wrap {
  --ink: #16181c;
  --ink-2: #6b7077;
  --ink-3: #9ca0a6;
  --line: #e4e7ec;
  --line-2: #d3d8de;
  --surface: #f6f7f9;

  /* min-height rather than a fixed overlay, so a short viewport scrolls normally
     instead of clipping the form. */
  display: flex;
  min-height: 100vh;
  background: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* ---- Left: the form ----------------------------------------------------- */

/*
 * With no logo lockup at the top, the form is vertically centred and the footer line
 * is pinned to the bottom. `space-between` on two children would leave the form
 * top-aligned against a lot of empty space.
 */
.cph-auth__form {
  position: relative;
  width: 620px;
  max-width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 88px 44px;
}

.cph-auth__center {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 460px;
}

.cph-auth-wrap h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--ink);
}

.cph-auth__lead { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }

.cph-auth__error {
  padding: 13px 15px;
  border: 1px solid #f2c2c2;
  border-left: 3px solid #c0392b;
  border-radius: 10px;
  background: #fdf3f3;
  font-size: 14px;
  color: #8f2d22;
}

.cph-auth__fields { display: flex; flex-direction: column; gap: 18px; }

.cph-field { display: flex; flex-direction: column; gap: 8px; }

.cph-field > label { font-size: 13px; font-weight: 600; color: var(--ink); }

.cph-auth-wrap .cph-input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.cph-auth-wrap .cph-input::placeholder { color: var(--ink-3); }

/* The focus ring is derived from the configured brand colour rather than hardcoded:
   the accent is themeable (it is #383838 on this install, not the #0088cc default),
   and a fixed blue halo around a grey-branded field reads as a rendering fault. */
.cph-auth-wrap .cph-input:focus {
  outline: 0;
  background: #fff;
  border-color: var(--cph-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cph-primary) 14%, transparent);
}

.cph-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.cph-auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.cph-auth-wrap .cph-cbx {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  appearance: none;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cph-auth-wrap .cph-cbx:checked { background: var(--ink); border-color: var(--ink); }
.cph-auth-wrap .cph-cbx:checked::after { content: "✓"; font-size: 11px; font-weight: 700; color: #fff; }

.cph-auth__link { font-size: 14px; font-weight: 600; color: var(--cph-primary); text-decoration: none; }
.cph-auth__link:hover { text-decoration: underline; }

.cph-auth-wrap .cph-btn {
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  transition: background .2s, box-shadow .25s, transform .25s;
}

.cph-auth-wrap .cph-btn:hover { background: #000; box-shadow: 0 8px 22px -10px rgb(0 0 0 / 0.5); }
.cph-auth-wrap .cph-btn:active { transform: translateY(1px) scale(.99); }

.cph-auth__copy {
  position: absolute;
  left: 88px;
  right: 88px;
  bottom: 44px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---- Right: the brand panel --------------------------------------------- */

.cph-auth__aside {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 76px 60px;
  overflow: hidden;
  /* A gradient rather than a photograph: the hub ships without brand imagery, and a
     missing asset on the sign-in screen looks broken in a way a gradient never does. */
  background:
    radial-gradient(120% 90% at 82% 8%, rgb(0 136 204 / 0.30) 0%, transparent 58%),
    linear-gradient(137deg, #05131c 14%, #21293c 85%);
}

.cph-auth__tag {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid rgb(0 136 204 / 0.45);
  border-radius: 999px;
  background: rgb(0 136 204 / 0.16);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: #4fb3e6;
}

.cph-auth-wrap h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.12;
  color: #fff;
}

.cph-auth__sub {
  max-width: 520px;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #aab4c4;
}

.cph-auth__feats { display: flex; flex-direction: column; gap: 18px; }

.cph-auth__feat { display: flex; align-items: center; gap: 14px; }

.cph-auth__tick {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(0 136 204 / 0.18);
  color: #4fb3e6;
}

.cph-auth__tick svg { width: 16px; height: 16px; }

.cph-auth__ft { font-size: 16px; font-weight: 600; color: #fff; }
.cph-auth__fs { font-size: 13px; color: #aab4c4; }

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 980px) {
  .cph-auth__aside { display: none; }
  .cph-auth__form {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 32px;
    padding: 40px 28px 32px;
  }
  .cph-auth__center { max-width: 100%; margin: 0 auto; }
  .cph-auth-wrap h1 { font-size: 28px; }

  /* Back into normal flow on narrow screens: absolute positioning would let a tall
     form scroll underneath the footer line rather than pushing it down. */
  .cph-auth__copy { position: static; margin-top: auto; }
}