/* SolveIt Suite theme for the osTicket agent sign-in and password-reset pages (scp/login.php, scp/pwreset.php).
   Linked from include/staff/login.header.php by scripts/osticket-patch.sh, after the vendor scp/css/login.css. */
@font-face { font-family: "Geist"; src: url("Geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --si-canvas: #faf9f6; --si-surface: #fff; --si-sunken: #f3f1ec; --si-ink: #111; --si-ink-2: #5f5e5a; --si-ink-3: #6e6c67;
  --si-line: #e4e1db; --si-line-strong: #cfcbc3; --si-control: #8f8c85; --si-focus: #1f5fd1; --si-danger: #c2261f; --si-danger-soft: #fbe5e3;
  --si-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html { overflow-y: auto; height: auto; }
body, #loginBody { margin: 0; min-height: 100vh; height: auto; background: var(--si-canvas); color: var(--si-ink); font: 15px/1.55 var(--si-font); text-align: left; -webkit-font-smoothing: antialiased; }
body, input, button { font-family: var(--si-font); color: var(--si-ink); }
#brickwall, #blur, #background, #background-compat { display: none !important; }

#loginBox {
  position: static; width: 100%; max-width: 420px; margin: 0 auto; padding: 32px 32px 28px; box-sizing: border-box;
  background: var(--si-surface); border: 1px solid var(--si-line); border-radius: 12px; box-shadow: 0 4px 16px rgba(17, 17, 17, 0.06);
  text-align: left; isolation: auto; mix-blend-mode: normal;
}
#loginBox::after { display: none; content: none; }
#loginBody { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12vh 16px 48px; box-sizing: border-box; }

#logo a { display: inline-flex; align-items: center; height: auto; }
#logo a img, #logo a img[src*="lockup"] { height: 24px; max-height: 24px; width: auto; max-width: none; }
#logo .valign-helper { display: none; }
.si-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 20px 0 4px; color: var(--si-ink); }
#loginBox > h3, #loginBox #login-message { margin: 0 0 20px; text-align: left; font-size: 14px; font-weight: 400; color: var(--si-ink-2); }
#loginBox #login-message:empty { display: none; }
#loginBox h3[style*="color:black"] { color: var(--si-ink-2) !important; }
#loginBox h3 em { font-style: normal; }
div.banner { color: var(--si-ink-2); font-size: 14px; line-height: 1.5; }
div.banner:not(:empty) { margin-bottom: 16px; }
div.banner small { font-size: inherit; }

form { width: auto; margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; }
fieldset input, #loginBox input[type="text"], #loginBox input[type="password"] {
  display: block; width: 100%; height: 40px; margin: 0 0 12px; padding: 4px 12px; box-sizing: border-box;
  background: var(--si-surface); border: 1px solid var(--si-control); border-radius: 6px; font-size: 15px; color: var(--si-ink);
}
::placeholder { color: var(--si-ink-3); font-style: normal; opacity: 1; }
input:focus { border-color: var(--si-control); box-shadow: none; outline: 2px solid var(--si-focus); outline-offset: 2px; }
button[type="submit"], input[type="submit"], input.submit, .submit.button, .primary.button {
  display: block; width: 100%; height: 40px; line-height: 40px; margin: 8px 0 0; padding: 0 16px; float: none;
  background: var(--si-ink); color: #fff; border: 0; border-radius: 6px; box-shadow: none; font: 500 14px var(--si-font); cursor: pointer; text-align: center;
}
button[type="submit"]:hover, input[type="submit"]:hover, input[type="submit"]:active, input.submit:hover { background: #2a2a2a; color: #fff; box-shadow: none; }
button[type="submit"] i, input.submit i { display: none; }
.pull-right { float: none; }
#loginBox h3[style*="display:inline"] { display: block !important; margin: 14px 0 0; text-align: center; font-size: 14px; }
#reset-link { color: var(--si-ink-2); text-decoration: underline; text-decoration-color: var(--si-line-strong); text-underline-offset: 3px; }
#reset-link:hover { color: var(--si-ink); text-decoration-color: var(--si-ink); }
#reset-link.hidden { display: none; }
.or hr { margin: 20px 0; border-bottom: 1px solid var(--si-line); }
.external-auth { text-align: center; }

#loading.dialog { position: static; margin: 0 0 12px; padding: 8px 0; background: none; border: 0; box-shadow: none; }
#loading h1 { font-size: 14px; font-weight: 400; color: var(--si-ink-2); margin: 0; }

#company { position: static; width: auto; margin: 0; left: auto; }
#company .content { background: none; box-shadow: none; text-shadow: none; border-radius: 0; color: var(--si-ink-3); font-size: 13px; font-weight: 400; padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--si-line); text-align: left; }
#poweredBy { display: none; }

@media (max-width: 480px) {
  #loginBody { padding: 24px 16px 40px; }
  #loginBox { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }