/*
 * Copyright (c) 2026 Voxtell - built for In-Telecom Cloud
 * All rights reserved.
 *
 * NetSapiens V45+ sign-in app (/auth): the banner version.
 *
 * V45 replaced the classic /portal/login page with a standalone React/MUI
 * app at /auth. PORTAL_CSS_CUSTOM never reaches it; this file is wired by two
 * uiconfigs that point at the same URL on the theme host (the app
 * de-duplicates the href):
 *   PORTAL_AUTH_APP_CSS_CUSTOM  (official hook; the main login route)
 *   PORTAL_CSS_FONT_FILE        (every /auth route: forgot password, MFA)
 * The app shows its own card the moment the logo image loads and applies
 * these uiconfigs only after it has fetched its settings, a beat later. On
 * NetSapiens-hosted servers nothing can run before that (no file on the
 * server), so anything that moves or restyles the card reads as a flicker.
 * Hence this version ADDS and never restyles: the card, its fields, fonts
 * and layout stay exactly as NetSapiens renders them, branded through
 * uiconfigs that apply in the same instant (PORTAL_THEME_PRIMARY, the logo in
 * the NS image store, PORTAL_LOGGED_IN_POWERED_BY), and the brand arrives as
 * a hero banner across the top that fades in: the Izzy mark, the headline,
 * the sub line, the contact chip and the call vignette (img/itc-hero-ui.svg,
 * the one file referenced; the app has no CSP, it loads in parallel). The
 * full split layout with the Izzy panel lives on in the classic sign-in page
 * (vt-resets.css, production) and in git history for this file up to commit
 * c49a0b6, should a server-side hook ever become available again.
 *
 * FONT_FILE also makes the classic portal layouts link this file, so every
 * rule is scoped to #root / body:has(#root) (only the /auth app renders
 * #root). Five pseudo-elements carry the banner; none belongs to the card.
 */

:root {
  --vt-auth-banner-bg: #0c1f3f;
  --vt-auth-banner-bg2: #17438E;
  --vt-auth-banner-fg: #ffffff;
  --vt-auth-banner-sky: #38b1e6;
  --vt-auth-banner-h: 112px;
  --vt-auth-banner-x: 32px;
  --vt-auth-banner-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@keyframes vt-auth-banner {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* the strip, carrying the headline */
body:has(#root)::before {
  content: 'Never Miss Another Customer Call Again.';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  height: var(--vt-auth-banner-h);
  padding: 42px 0 0 var(--vt-auth-banner-x);
  background: linear-gradient(100deg, var(--vt-auth-banner-bg) 0%, var(--vt-auth-banner-bg2) 70%, #1d5bb8 100%);
  /* a crisp edge with a soft lift off the page (a fading tail looked smeared) */
  box-shadow: 0 12px 32px -16px rgba(12, 31, 63, 0.45);
  color: var(--vt-auth-banner-fg);
  font: 700 24px/1 var(--vt-auth-banner-font);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  animation: vt-auth-banner 360ms ease-out both;
  pointer-events: none;
}

/* the mark line above the headline */
#root::before {
  content: '\2726  Izzy  \B7  BY IN-TELECOM CLOUD';
  position: fixed;
  top: 18px;
  left: var(--vt-auth-banner-x);
  z-index: 11;
  color: var(--vt-auth-banner-sky);
  font: 600 12px/1 var(--vt-auth-banner-font);
  letter-spacing: 0.18em;
  white-space: nowrap;
  animation: vt-auth-banner 360ms ease-out both;
  pointer-events: none;
}

/* the sub line below it */
#root::after {
  content: 'Your AI receptionist answers every call and text, 24/7. No more voicemails, no more missed opportunities.';
  position: fixed;
  top: 78px;
  left: var(--vt-auth-banner-x);
  z-index: 11;
  color: var(--vt-auth-banner-fg);
  opacity: 0.82;
  font: 400 14px/1 var(--vt-auth-banner-font);
  white-space: nowrap;
  animation: vt-auth-banner 360ms ease-out both;
  pointer-events: none;
}

/* the contact chip on the right (text: the app accepts no links) */
body:has(#root)::after {
  content: 'Contact us \B7  (833) 482-8647';
  position: fixed;
  top: 36px;
  right: var(--vt-auth-banner-x);
  z-index: 11;
  box-sizing: border-box;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--vt-auth-banner-fg);
  font: 600 14px/1 var(--vt-auth-banner-font);
  white-space: nowrap;
  animation: vt-auth-banner 360ms ease-out both;
  pointer-events: none;
}

/* the call vignette, tucked into the strip left of the chip (the SVG is
   448 x 243 incl. its shadow margins; at 190px wide it is 103px tall) */
#root > div::before {
  content: '';
  position: fixed;
  top: 5px;
  right: 300px;
  z-index: 11;
  width: 190px;
  height: 104px;
  background: url(img/itc-hero-ui.svg) center top / 190px auto no-repeat;
  animation: vt-auth-banner 360ms ease-out both;
  pointer-events: none;
}

/* below 1280px the sub line (from the left) and the vignette (from the
   right) would overlap: the art goes first, the sentence stays */
@media (max-width: 1279px) {
  #root > div::before {
    content: none;
  }
}
/* narrower screens: no art, no sub line; under 720px no chip either */
@media (max-width: 1023px) {
  #root > div::before {
    content: none;
  }
  #root::after {
    content: none;
  }
  :root {
    --vt-auth-banner-h: 88px;
  }
  body:has(#root)::before {
    padding-top: 44px;
    font-size: 20px;
  }
}

@media (max-width: 719px) {
  body:has(#root)::after {
    content: none;
  }
  body:has(#root)::before {
    font-size: 17px;
  }
}

/* short screens: a compact strip, so the card is never covered */
@media (max-height: 639px) {
  :root {
    --vt-auth-banner-h: 52px;
  }
  body:has(#root)::before {
    padding-top: 18px;
    font-size: 15px;
  }
  body:has(#root)::after {
    top: 10px;
    padding: 9px 16px;
    font-size: 12px;
  }
  #root::before,
  #root::after,
  #root > div::before {
    content: none;
  }
}

/* reduced motion: the banner simply appears */
@media (prefers-reduced-motion: reduce) {
  body:has(#root)::before,
  body:has(#root)::after,
  #root::before,
  #root::after,
  #root > div::before {
    animation: none;
  }
}