/*
    evix-brand-login.css — EVIX house style for the agent login screen (/scp/login.php).

    osTicket blows the company logo up to full-screen as a blurred backdrop
    (#brickwall / #background use url(../logo.php?backdrop)) with an orange
    wash over it. That trick only works for an opaque rectangular logo; with a
    transparent mark it looks like an accident. The backdrop is replaced by the
    brand gradient instead.

    Loaded last from include/staff/login.header.php.
*/

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-sans-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-sans-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #091540;
  --periwinkle: #7692ff;
  --pink: #e60073;
  --surface: #ffffff;
  --border: #d3dbf7;
  --border-strong: #adbaea;
  --text: #0d1330;
  --text-muted: #4b5578;
  --link: #2338c4;
  --radius: 10px;
  --radius-sm: 6px;
  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The logo-as-wallpaper layers are switched off entirely. */
#brickwall, #background, #background-compat {
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
}
#blur { filter: none !important; -webkit-filter: none !important; }

/* Brand gradient in their place: navy with a periwinkle and pink glow, the
   same two colours as the mark in the logo. */
html, body#loginBody {
  background-color: var(--navy) !important;
  background-image:
    radial-gradient(60rem 40rem at 15% 10%, rgb(118 146 255 / 28%), transparent 60%),
    radial-gradient(45rem 35rem at 85% 85%, rgb(230 0 115 / 24%), transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body, input, select, textarea, button { font-family: var(--font) !important; }

/* The login card itself */
#loginBox {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 20%) !important;
  color: var(--text);
}
#loginBox:after { background-color: transparent !important; }
#loginBox h1, #loginBox h2, #loginBox p, #loginBox label { color: var(--text) !important; }
#loginBox a { color: var(--link) !important; }

#loginBox input[type="text"], #loginBox input[type="password"], #loginBox input[type="email"] {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 1rem;
  color: var(--text);
}

/* login.css focuses fields in orange; periwinkle matches the rest of EVIX. */
input:focus, select:focus, textarea:focus {
  border: 1px solid var(--periwinkle) !important;
  box-shadow: 0 0 0 3px rgb(118 146 255 / 35%) !important;
  outline: none !important;
}

#loginBox input[type="submit"], #loginBox .button, input[type="submit"] {
  background: var(--pink) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1.4rem !important;
  height: auto !important;
  cursor: pointer;
  text-shadow: none !important;
  box-shadow: none !important;
}
#loginBox input[type="submit"]:hover, input[type="submit"]:hover { background: #ff1a8c !important; }

/* Footer bits outside the card sit on the dark gradient */
#company, #poweredBy, #company a, #poweredBy a { color: #c3cdff !important; }
#company a:hover, #poweredBy a:hover { color: #fff !important; }
/* login.css puts the copyright line in a translucent black pill with a text
   shadow; on the brand gradient that reads as a stray black chip. */
#company .content {
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #c3cdff !important;
}