/* =========================================================
   PegasusXI — Agent login screen (full dark card)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root {
  --px-bg: #080b14;
  --px-surface: #0c1020;
  --px-surface-2: #111628;
  --px-surface-3: #161c32;
  --px-border: rgba(140, 170, 220, 0.18);
  --px-text: #e4e8f0;
  --px-text-muted: #8a92a8;
  --px-gold: #c9a032;
  --px-gold-hover: #ddb63e;
  --px-gold-active: #a8851e;
  --px-primary: #4a7ec2;
  --px-crystal: #7cc5e8;
}

html,
body#loginBody,
body {
  height: 100% !important;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(74, 126, 194, 0.25), transparent 55%),
              radial-gradient(ellipse 60% 40% at 90% 10%, rgba(201, 160, 50, 0.12), transparent 45%),
              var(--px-bg) !important;
  color: var(--px-text) !important;
  font-family: 'Satoshi', Helvetica, Arial, sans-serif !important;
}

#brickwall {
  background-image: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

#blur,
#background,
#background-compat {
  display: none !important;
  background-image: none !important;
  background: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Kill the frosted white overlay from default login.css */
#loginBox:after,
#loginBox::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

#loginBox {
  background: var(--px-surface) !important;
  background-color: var(--px-surface) !important;
  border: 1px solid var(--px-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(201, 160, 50, 0.1),
              0 0 40px rgba(74, 126, 194, 0.12) !important;
  color: var(--px-text) !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
  padding: 2rem 1.75rem 1.5rem !important;
  width: min(420px, calc(100vw - 32px)) !important;
  margin-left: 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
  top: 12% !important;
}

#loginBox h1 {
  margin: 0 0 0.5rem !important;
}

#logo a {
  height: auto !important;
  padding: 0.25rem 0 0.75rem;
}

#loginBox h1#logo img,
#logo a img {
  max-height: 96px !important;
  max-width: 96px !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(201, 160, 50, 0.55) !important;
  box-shadow: 0 0 28px rgba(74, 126, 194, 0.4) !important;
  background: var(--px-surface-2);
}

#loginBox .valign-helper {
  display: none !important;
}

#login-message,
#loginBox h3#login-message {
  color: var(--px-gold) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0.25rem 0 1.25rem !important;
}

#loginBox .banner,
#loginBox .banner small,
div.banner {
  color: var(--px-text-muted) !important;
}

#loginBox form {
  width: 100% !important;
  max-width: 280px;
  margin: 0 auto !important;
}

#loginBox fieldset {
  margin: 0 !important;
  padding: 0 !important;
}

#loginBox fieldset input,
#loginBox input[type="text"],
#loginBox input[type="password"],
#loginBox input#name,
#loginBox input#pass {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--px-surface-3) !important;
  background-color: var(--px-surface-3) !important;
  border: 1px solid var(--px-border) !important;
  color: var(--px-text) !important;
  border-radius: 0.5rem !important;
  padding: 12px 14px !important;
  margin-bottom: 0.85rem !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

#loginBox input:focus,
#loginBox fieldset input:focus {
  border-color: var(--px-primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 126, 194, 0.25) !important;
  outline: none !important;
}

#loginBox input::placeholder,
#loginBox input::-webkit-input-placeholder {
  color: var(--px-text-muted) !important;
  opacity: 1;
  font-style: normal !important;
}

#reset-link,
#loginBox #reset-link {
  color: var(--px-crystal) !important;
  font-size: 0.8rem;
  text-decoration: none;
}

#reset-link:hover {
  color: var(--px-gold-hover) !important;
}

#loginBox h3 {
  color: var(--px-text-muted) !important;
}

button.submit,
#loginBox button.submit,
#loginBox .button,
#loginBox button,
#loginBox input[type="submit"] {
  background: linear-gradient(135deg, var(--px-gold), var(--px-gold-active)) !important;
  background-color: var(--px-gold) !important;
  color: #0a0c14 !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 18px rgba(201, 160, 50, 0.35) !important;
  height: auto !important;
  line-height: 1.3 !important;
  padding: 10px 18px !important;
  font-size: 0.9rem !important;
}

button.submit:hover,
#loginBox .button:hover,
#loginBox button:hover {
  background: linear-gradient(135deg, var(--px-gold-hover), var(--px-gold)) !important;
  color: #0a0c14 !important;
}

#loginBox button i,
#loginBox .button i {
  color: #0a0c14 !important;
}

#company {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--px-border);
}

#company,
#company .content {
  color: var(--px-text-muted) !important;
  background: transparent !important;
  font-size: 0.8rem;
}

#poweredBy {
  color: var(--px-text-muted) !important;
  opacity: 0.45;
  margin-top: 1.5rem;
}

#poweredBy .osticket-logo {
  filter: grayscale(1) brightness(1.5);
  opacity: 0.65;
}

.or hr {
  border-color: var(--px-border) !important;
}

#loading.dialog {
  background: var(--px-surface-2) !important;
  color: var(--px-text) !important;
  border: 1px solid var(--px-border);
  border-radius: 0.75rem;
}

#loading h1 {
  color: var(--px-crystal) !important;
  font-family: 'Cinzel', Georgia, serif;
}