/*
 * OneHLP theme: staff login + password reset pages (/scp/login.php, pwreset.php)
 *
 *   >= 960px  split screen: navy brand panel (left) + sign-in form (right)
 *   601-959px centred card on a light background
 *   <= 600px  full-screen app-style form
 *
 * The brand panel is drawn with body::before / body::after, so no template
 * changes are needed. 16px inputs stop iOS Safari zooming on focus.
 * Loaded last from include/staff/login.header.php, after css/onehlp-tokens.css
 * (generated from theme/brand.json, ADR-002); this file uses roles only.
 */

/* login.css forces a permanent scrollbar (html { overflow-y: scroll }) */
html { overflow-y: auto; height: auto; background: var(--oh-surface); }
*, *::before, *::after { box-sizing: border-box; }

body#loginBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  padding: 32px 24px;
  background: var(--oh-surface);
  line-height: 1.5;
}
body, input, button { font-family: var(--oh-font); color: var(--oh-text); }

/* hide the photo backdrop and frosted-glass layers */
#brickwall, #blur, #background, #background-compat { display: none; }   /* #brickwall returns on wide screens */

/* ---------- Sign-in form ---------- */
#loginBox {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 420px;               /* room for the ADR-002 type sizes */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  mix-blend-mode: normal;
}
#loginBox:after { display: none; }

/* OneHLP logo replaces the uploaded staff logo */
h1#logo { margin: 0 0 28px; }
#logo a {
  display: block;
  height: 52px;
  background: url(../../images/onehlp-logo.png) left center / contain no-repeat;
}
:root[data-theme="dark"] #logo a { background-image: url(../../images/onehlp-logo-dark.png); }
#logo a img, #logo .valign-helper { display: none; }

/* "Welcome back" + "Sign in to your OneHLP staff account" (login.tpl.php) */
h2.oh-welcome {
  margin: 0 0 6px;
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--oh-text);
}
p.oh-subtitle {
  margin: 0 0 28px;
  font-size: 1.125rem;
  color: var(--oh-text-muted);
}
p.oh-subtitle strong { color: var(--oh-text); font-weight: 600; }

/* errors / notices only ("Invalid login", "Valid CSRF Token Required"...) */
h3#login-message { margin: 0 0 16px; font-size: 1rem; font-weight: 500; color: var(--oh-danger-strong); text-align: left; }
h3#login-message:empty { display: none; }
h3#login-message:not(:empty) {
  padding: 10px 12px;
  background: var(--oh-danger-faint);
  border: 1px solid var(--oh-danger-border);
  border-radius: 8px;
}

/* password-reset pages: their <h3> is the page title */
#loginBox > h3:not(#login-message) {
  margin: 0 0 24px;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--oh-text);
  text-align: left;
}

/* "Sign in with passkey" (auth-passkey plugin) + OR divider */
.oh-passkey[hidden] { display: none; }
.oh-passkey-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  font-family: var(--oh-font);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--oh-primary-text);
  background: var(--oh-primary-soft);
  border: 1px solid var(--oh-primary-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.oh-passkey-btn:hover { background: var(--oh-primary-soft-hover); border-color: var(--oh-primary); }
.oh-passkey-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--oh-primary-rgb), .2); }
.oh-passkey-btn:disabled { opacity: .6; cursor: progress; }
.oh-passkey-icon { flex: none; color: var(--oh-primary-text); }
.oh-passkey-label { flex: none; text-align: left; white-space: nowrap; }
.oh-passkey-hint { flex: 1 1 auto; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; font-weight: 400; color: var(--oh-text-muted); }
.oh-passkey-msg { margin-top: 8px; font-size: 1rem; color: var(--oh-danger-strong); }
.oh-passkey-msg:empty { display: none; }
.oh-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--oh-text-muted);
  font-size: .9375rem;
  letter-spacing: .06em;
}
.oh-or::before, .oh-or::after { content: ""; flex: 1; border-top: 1px solid var(--oh-border-strong); }
div.banner { color: var(--oh-text-muted); margin-bottom: 16px; }
div.banner:empty { display: none; }

form { width: auto; margin: 0; }
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
fieldset input,
#loginBox input[type=text],
#loginBox input[type=password] {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  font-size: 1.125rem;
  font-style: normal;
  color: var(--oh-text);
  border: 1px solid var(--oh-control-border);
  border-radius: 10px;
  background: var(--oh-surface);
  box-shadow: 0 1px 2px rgba(var(--oh-shadow-rgb), .05);
  transition: border-color .15s, box-shadow .15s;
}
#loginBox input:focus {
  outline: none;
  border-color: var(--oh-primary);
  box-shadow: 0 0 0 4px rgba(var(--oh-primary-rgb), .15);
}
::placeholder, :-webkit-input-placeholder { color: var(--oh-text-placeholder); font-style: normal; }

/* Primary button: full width */
.button, button[type=submit], input[type="submit"], .primary.button,
#loginBox .submit.button.pull-right, #loginBox .submit.button.pull-center {
  float: none;
  display: block;
  width: 100%;
  height: 48px;
  margin: 6px 0 0;
  padding: 0 18px;
  font-family: var(--oh-font);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 46px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--oh-primary);
  background: var(--oh-primary);
  background-image: none;
  color: var(--oh-on-primary);
  box-shadow: 0 1px 2px rgba(var(--oh-shadow-rgb), .08);
  text-shadow: none;
  cursor: pointer;
  transition: background-color .15s;
}
.button:hover, button[type=submit]:hover, input[type=submit]:hover, input[type=submit]:active {
  background: var(--oh-primary-hover);
  border-color: var(--oh-primary-hover);
  box-shadow: 0 1px 2px rgba(var(--oh-shadow-rgb), .08);
  color: var(--oh-on-primary);
}
.button i { margin-right: 6px; }
form > input[type="submit"] { margin-top: 14px; }   /* pwreset: button outside the fieldset */

/* "Forgot My Password" under the button */
fieldset h3 { order: 10; display: block !important; margin: 4px 0 0; text-align: center; }
#reset-link, #loginBox a { color: var(--oh-primary-text); font-size: 1rem; font-weight: 500; }
#reset-link { display: inline-block; padding: 6px; }
#reset-link.hidden { display: none; }

/* External sign-in (SSO) separator */
.or hr { border: 0; border-top: 1px solid var(--oh-border); margin: 24px 0; }

/* Footer */
#poweredBy {
  position: static;
  margin: 40px 0 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  font-size: .9375rem;
  color: var(--oh-text-muted);
}
#poweredBy a { color: var(--oh-primary-text); font-weight: 600; letter-spacing: .02em; }

/* "Verifying..." overlay shown while the login is checked */
#loading.dialog {
  border: 1px solid var(--oh-border);
  border-radius: 12px;
  box-shadow: 0 12px 24px -4px rgba(var(--oh-shadow-rgb), .15);
}

/* ---------- Wide screens: split layout with brand panel ---------- */
/* #brickwall is osTicket's (empty) photo-backdrop div; it becomes the navy
   brand panel. ::before = title, ::after = tagline + intro text. They and the
   sign-in cards are stacked in a column (cards fill the middle, the name and
   text sit at the bottom), so larger text pushes things up instead of
   overlapping. */
@media (min-width: 960px) {
  body#loginBody { padding-left: calc(45% + 24px); }
  #brickwall {
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: auto;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 136px 56px 64px;         /* top: below the icon (56-112px) */
    text-align: left;                 /* login.css centres all body text */
    background:
      url(../../images/onehlp-icon.png) 56px 56px / 56px 56px no-repeat,
      radial-gradient(circle at 85% 12%, rgba(var(--oh-on-chrome-rgb), .10) 0, transparent 40%),
      radial-gradient(circle at 5% 100%, rgba(var(--oh-primary-rgb), .45) 0, transparent 50%),
      linear-gradient(160deg, var(--oh-chrome) 0%, var(--oh-chrome-2) 100%);
  }
  #brickwall::before {
    content: "OneHLP";
    order: 2;
    flex: none;
    margin-bottom: 4px;
    color: var(--oh-on-chrome);
    font-size: 2.75rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
  }
  #brickwall::after {
    content: "Service unparalleled\A\A Sign in to manage tickets, customers and your support team in one place.";
    white-space: pre-line;
    order: 3;
    flex: none;
    max-width: 420px;
    color: rgba(var(--oh-on-chrome-rgb), .78);
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

/* ---------- Tablets: centred card ---------- */
@media (min-width: 601px) and (max-width: 959px) {
  body#loginBody { background: var(--oh-bg); }
  #loginBox {
    max-width: 500px;
    padding: 40px 40px 32px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px -16px rgba(var(--oh-shadow-rgb), .2);
  }
}

/* ---------- Phones: full-screen form ---------- */
@media (max-width: 600px) {
  body#loginBody {
    justify-content: space-between;
    padding: calc(32px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));
  }
  #loginBox { max-width: none; }
  h1#logo { margin-bottom: 24px; }
  #logo a { height: 56px; background-position: center; }
  h2.oh-welcome { font-size: 1.625rem; text-align: center; }
  p.oh-subtitle { text-align: center; margin-bottom: 24px; }
  #loginBox > h3:not(#login-message) { text-align: center; font-size: 1.375rem; }
  .oh-passkey-hint { display: none; }          /* keep the button text on one line */
  .button, button[type=submit], input[type="submit"],
  #loginBox .submit.button.pull-right { height: 52px; line-height: 50px; }
  #reset-link { font-size: 1.0625rem; padding: 10px; }
  #poweredBy { margin-top: 24px; }
}

/* ---------- In-app help (ADR-006 Stage C) ---------- */
/* "?" in the top-right corner; the panel lies over the sign-in page */
#loginBody > .oh-help-btn { position: fixed; top: 16px; right: 16px; z-index: 50; }
@media (max-width: 600px) { #loginBody > .oh-help-btn { top: 10px; right: 10px; } }

/* ---------- Company logo and backdrop uploads (ADR-008) ---------- */
:root[data-oh-logo="custom"] #logo a { background: none; }
:root[data-oh-logo="custom"] #logo a img { display: inline-block; max-height: 64px; max-width: 280px; width: auto; }
/* A picked backdrop photo fills the brand panel under a navy tint, so the
   OneHLP name and text keep their contrast (ADR-002) */
@media (min-width: 960px) {
  :root[data-oh-backdrop="custom"] #brickwall {
    background:
      url(../../images/onehlp-icon.png) 56px 56px / 56px 56px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--oh-chrome) 55%, transparent) 0%, color-mix(in srgb, var(--oh-chrome) 88%, transparent) 100%),
      var(--oh-backdrop) center / cover no-repeat,
      var(--oh-chrome);
  }
}