/*
    Staff authentication pages (login, forgot password).
    Loaded by application/views/authentication/includes/head.php after custom.css,
    so the --lpp-* tokens come from the admin theme; every var() has a fallback in case custom.css is absent.
*/

body.lpp-auth-page {
  background: #fff;
}

/* ---------- Split layout ---------- */

.lpp-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 992px) {
  .lpp-login {
    grid-template-columns: minmax(0, 1.1fr) minmax(480px, 1fr);
  }
}

/* ---------- Brand panel: a press sheet with CMY inks overprinting ---------- */

.lpp-brand {
  display: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px 36px;
  background: #eef1f5;
  color: var(--lpp-ink, #172033);
}

@media (min-width: 992px) {
  .lpp-brand {
    display: flex;
  }
}

/* Halftone texture fading out toward the top right */
.lpp-brand::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(rgba(23, 32, 51, .16) 1.1px, transparent 1.7px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(20deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(20deg, #000 0%, transparent 60%);
}

/* Slug line, as printed in the margin of a press sheet */
.lpp-brand-slug {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lpp-brand-slug svg {
  flex: none;
  color: var(--lpp-ink, #172033);
}

.lpp-brand-slug span + span::before {
  content: '/';
  margin-right: 14px;
  opacity: .5;
}

.lpp-brand-copy {
  max-width: 460px;
  margin-top: auto;
  padding-bottom: 32px;
}

.lpp-brand-headline {
  max-width: 13ch;
  text-wrap: balance;
  margin: 0 0 16px;
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.lpp-brand-text {
  margin: 0;
  text-wrap: pretty;
  color: #344054;
  font-size: 16px;
  line-height: 1.55;
}

/* Colour control strip */
.lpp-colorbar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
}

.lpp-colorbar span {
  display: block;
  height: 14px;
  background: var(--swatch);
}

.lpp-colorbar span::after {
  content: attr(data-label);
  display: block;
  padding-top: 20px;
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
}

/* ---------- Form side ---------- */

.lpp-login-main {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 40px 16px 24px;
  background: #fff;
}

@media (min-width: 640px) {
  .lpp-login-main {
    padding: 48px 48px 28px;
  }
}

/* Below the split breakpoint the brand panel is hidden; keep a CMYK band as the brand cue */
.lpp-login-main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg,
      var(--lpp-cyan, #10b6df) 0 25%,
      var(--lpp-magenta, #df1491) 25% 50%,
      var(--lpp-yellow, #f4cf16) 50% 75%,
      var(--lpp-ink, #172033) 75% 100%);
}

@media (min-width: 992px) {
  .lpp-login-main::before {
    display: none;
  }
}

.lpp-login-inner {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 24px 0;
}

/* Letterhead: the logo sits centered at the top of the crop-marked sheet */
.lpp-login .company-logo {
  padding: 0 0 36px;
  text-align: center;
}

.lpp-login .company-logo a,
.lpp-login .company-logo img {
  display: inline-block;
}

.lpp-login .company-logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60px;
  margin: 0;
  /* The uploaded logo has an opaque white background; multiply hides it on any light surface */
  mix-blend-mode: multiply;
}

/* Crop marks framing the form like a trimmed sheet */
.lpp-sheet {
  position: relative;
}

.lpp-crop {
  display: none;
  position: absolute;
  width: 24px;
  height: 24px;
  overflow: visible;
  color: #a3acb9;
}

@media (min-width: 640px) {
  .lpp-crop {
    display: block;
  }
}

.lpp-crop--tl {
  top: -32px;
  left: -32px;
}

.lpp-crop--tr {
  top: -32px;
  right: -32px;
  transform: scaleX(-1);
}

.lpp-crop--bl {
  bottom: -32px;
  left: -32px;
  transform: scaleY(-1);
}

.lpp-crop--br {
  right: -32px;
  bottom: -32px;
  transform: scale(-1);
}

.lpp-auth-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #475467;
  font-size: 13px;
  font-weight: 600;
}

/* Small CMY dot cluster before the greeting */
.lpp-auth-eyebrow::before {
  content: '';
  width: 22px;
  height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--lpp-cyan, #10b6df) 4.5px, transparent 5px),
    radial-gradient(circle at 11px 5px, var(--lpp-magenta, #df1491) 4.5px, transparent 5px),
    radial-gradient(circle at 17px 5px, var(--lpp-yellow, #f4cf16) 4.5px, transparent 5px);
}

.lpp-auth-heading {
  margin: 0 0 8px;
  color: var(--lpp-ink, #172033);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.lpp-auth-subheading {
  margin: 0 0 32px;
  color: #475467;
  font-size: 15px;
  line-height: 1.5;
}

.lpp-login-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  color: #475467;
  font-size: 13px;
}

.lpp-login-footer p {
  margin: 0;
}

/* ---------- Fields ---------- */

.lpp-login .alert {
  border-radius: var(--lpp-radius-sm, 9px);
  text-align: left;
}

.lpp-login .form-group {
  margin-bottom: 20px;
}

.lpp-login .control-label {
  margin-bottom: 8px;
  color: var(--lpp-ink, #172033);
  font-weight: 600;
}

/* 16px keeps iOS from zooming the page when a field is focused */
.lpp-login .form-control {
  height: 48px;
  padding: 10px 14px;
  border-color: #d0d5dd;
  border-radius: var(--lpp-radius-sm, 9px);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}

.lpp-login .form-control:hover {
  border-color: #98a2b3;
}

/* Replace the browser's blue autofill fill; specificity beats custom.css focus styles */
.lpp-login input.form-control:-webkit-autofill,
.lpp-login input.form-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--lpp-ink, #172033);
}

.lpp-login input.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, var(--lpp-focus-ring, 0 0 0 3px rgba(16, 182, 223, .12));
  -webkit-text-fill-color: var(--lpp-ink, #172033);
}

.lpp-auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.lpp-auth-label-row .control-label {
  margin: 0;
}

/* Negative margin widens the hit area without moving the layout */
.lpp-auth-link {
  margin: -10px -6px;
  padding: 10px 6px;
  color: #475467;
  font-weight: 500;
}

.lpp-auth-link:hover,
.lpp-auth-link:focus {
  color: var(--lpp-ink, #172033);
  text-decoration: underline;
}

.lpp-auth-password {
  position: relative;
}

.lpp-auth-password .form-control {
  padding-inline-end: 52px;
}

/* Edge draws its own reveal button; ours replaces it */
.lpp-auth-password input::-ms-reveal {
  display: none;
}

.lpp-auth-reveal {
  display: flex;
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--lpp-radius-sm, 9px);
  background: transparent;
  color: var(--lpp-muted, #667085);
  cursor: pointer;
}

.lpp-auth-reveal:hover {
  color: var(--lpp-ink, #172033);
}

.lpp-auth-reveal[aria-pressed="true"] .lpp-icon-show,
.lpp-auth-reveal[aria-pressed="false"] .lpp-icon-hide {
  display: none;
}

.lpp-auth-hint {
  margin: 6px 0 0;
  color: var(--lpp-warning, #a15c00);
  font-size: 13px;
}

.lpp-auth-hint:empty {
  display: none;
}

.lpp-auth-remember {
  margin: -6px 0 20px;
}

.lpp-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0;
  color: #344054;
  font-weight: 400;
  cursor: pointer;
}

.lpp-auth-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--lpp-ink, #172033);
}

.lpp-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: var(--lpp-radius-sm, 9px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 16px -6px rgba(23, 32, 51, .45);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}

.lpp-auth-submit:hover {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 10px 22px -8px rgba(23, 32, 51, .55);
}

.lpp-auth-submit:active {
  transform: translateY(1px);
}

.lpp-auth-submit-arrow {
  transition: transform .2s;
}

.lpp-auth-submit:hover .lpp-auth-submit-arrow {
  transform: translateX(3px);
}

[dir="rtl"] .lpp-auth-submit-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .lpp-auth-submit:hover .lpp-auth-submit-arrow {
  transform: scaleX(-1) translateX(3px);
}

.lpp-auth-submit[disabled] {
  opacity: .8;
  cursor: progress;
}

.lpp-auth-submit[disabled] .lpp-auth-submit-arrow {
  display: none;
}

.lpp-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .lpp-auth-submit,
  .lpp-auth-submit-arrow,
  .lpp-login .form-control {
    transition: none;
  }
}

/* ---------- Login brand panel: process flow, working-day notes, holidays, announcement ---------- */

.lpp-brand-flow {
  align-self: stretch;
  margin: auto 0;
}

.lpp-brand-flow-title {
  margin: 0 0 14px;
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lpp-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpp-flow-step {
  --ink: var(--lpp-cyan, #10b6df);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 12px 11px;
  border: 1px solid #dfe4ec;
  border-top: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
}

.lpp-flow-step:nth-child(4n + 2) { --ink: var(--lpp-magenta, #df1491); }
.lpp-flow-step:nth-child(4n + 3) { --ink: var(--lpp-yellow, #f4cf16); }
.lpp-flow-step:nth-child(4n + 4) { --ink: var(--lpp-ink, #172033); }

.lpp-flow-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.lpp-flow-step:nth-child(4n + 3) .lpp-flow-num { color: #172033; }

.lpp-flow-step strong {
  color: var(--lpp-ink, #172033);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.lpp-flow-step small {
  color: #667085;
  font-size: 11px;
  line-height: 1.3;
}

/* A small arrow between steps of the same row */
.lpp-flow-step:not(:nth-child(4n))::after {
  content: '›';
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 1;
  color: #98a2b3;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
}

.lpp-brand-notes {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.lpp-note {
  padding: 10px 12px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: rgba(255, 255, 255, .6);
  color: #344054;
  font-size: 12px;
  line-height: 1.5;
}

.lpp-note-label {
  display: block;
  margin-bottom: 2px;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lpp-note-announcement {
  border-color: #f2d27a;
  background: #fff8e1;
  color: #5c4500;
}

.lpp-note-announcement .lpp-note-label { color: #8a6a00; }

.lpp-holidays {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Short windows keep the headline and colour strip; the extra notes go first, then the flow */
@media (max-height: 860px) {
  .lpp-brand-notes .lpp-note:not(.lpp-note-announcement) { display: none; }
}

@media (max-height: 700px) {
  .lpp-brand-flow { display: none; }
}

/* With the flow present, it alone takes the free space (auto margins above and below), so it sits centred
   between the slug line and the headline instead of sharing that space with the headline's own auto margin. */
.lpp-brand-flow ~ .lpp-brand-copy {
  margin-top: 0;
}