/* ════════════════════════════════════════════════════════════════════════
   The sign-in page (index.html) — Barakat's phone look, on every screen,
   with a living background: a UAE waterfront at dusk in Barakat's teal.

   The look is the phone's (the deep teal, its two soft glows, the glass card,
   the white button), now on desktops too. Behind the card the glows drift
   slowly, the city's windows light up as the page opens and a few keep
   switching on and off, a tower crane goes on lifting at a building that is
   still going up, and a dhow crosses the creek past old wind-tower houses and
   date palms. assets/js/login-scene.js draws the city to the shape of the
   screen; without it the teal and its glows show and the form works the same.

   Motion stops for anyone who asks their device for reduced motion.
   ════════════════════════════════════════════════════════════════════════ */

body.ls-page {
  --ls-teal:   #0B3A41;   /* the phone page's deep teal */
  --ls-ink:    #06333A;   /* the button's text */
  --ls-cyan:   88, 205, 216;
  --ls-mint:   142, 217, 203;
  --ls-light:  #DDF6F5;   /* lit windows, the stars */
  --ls-city-h: clamp(240px, 44vh, 500px);
}

/* ── the background ───────────────────────────────────────────────────── */
body.ls-page.authentication-bg {
  min-height: 100vh; min-height: 100dvh;
  background: var(--ls-teal) !important; color: #E9F6F7; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.ls-page.authentication-bg::before,
body.ls-page.authentication-bg::after { content: none !important; display: none !important; }   /* the glows live in the scene now */

.ls-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ls-blob { position: absolute; border-radius: 50%; filter: blur(40px); will-change: transform; }
.ls-blob-a {                                   /* the cyan glow, top left */
  width: max(120vw, 70vmax); height: max(120vw, 70vmax); left: min(-40vw, -24vmax); top: min(-42vw, -30vmax);
  background: radial-gradient(circle, rgba(var(--ls-cyan), .7), rgba(58, 171, 184, 0) 65%);
  animation: ls-drift-a 19s ease-in-out infinite alternate;
}
.ls-blob-b {                                   /* the mint glow, bottom right */
  width: max(110vw, 64vmax); height: max(110vw, 64vmax); right: min(-45vw, -26vmax); bottom: min(-30vw, -26vmax);
  background: radial-gradient(circle, rgba(var(--ls-mint), .5), rgba(var(--ls-mint), 0) 65%);
  animation: ls-drift-b 23s ease-in-out infinite alternate;
}
.ls-glow {                                     /* a soft haze behind the skyline, so the towers stand out */
  position: absolute; left: 50%; bottom: calc(var(--ls-city-h) * .4);
  width: 150vmax; height: 46vmax; border-radius: 50%; transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(var(--ls-mint), .2), rgba(var(--ls-cyan), .07) 55%, rgba(var(--ls-cyan), 0) 100%);
}
.ls-stars { position: absolute; inset: 0 0 auto 0; height: 50%; animation: ls-in 2.4s ease-out both; }
.ls-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--ls-light); opacity: .5;
  animation: ls-star 7s ease-in-out infinite;
}
.ls-city { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ls-city-h); }
.ls-city svg { display: block; width: 100%; height: 100%; }

/* the drawing's moving parts (classes set by login-scene.js) */
.ls-lit   { animation: ls-in 1.6s ease-out both; }
.ls-lit-2 { animation-delay: .55s; }
.ls-lit-3 { animation-delay: 1.1s; }
.ls-tw    { animation: ls-tw 11s ease-in-out infinite; }
.ls-beacon { animation: ls-blink 2.8s linear infinite; }
.ls-trolley { animation: ls-trolley 17s ease-in-out infinite alternate; }
.ls-cable { transform-box: fill-box; transform-origin: 50% 0; animation: ls-cable 8.5s ease-in-out infinite alternate; }
.ls-hook  { animation: ls-hook 8.5s ease-in-out infinite alternate; }
.ls-bob   { transform-box: fill-box; transform-origin: 50% 100%; animation: ls-bob 4.8s ease-in-out infinite; }
.ls-glint { animation: ls-glint 6s ease-in-out infinite; }

@keyframes ls-in      { from { opacity: 0; } }
@keyframes ls-drift-a { to { transform: translate(6vw, 5vh) scale(1.06); } }
@keyframes ls-drift-b { to { transform: translate(-7vw, -5vh) scale(1.08); } }
@keyframes ls-star    { 0%, 100% { opacity: .5; } 50% { opacity: .12; } }
@keyframes ls-tw      { 0%, 44% { opacity: .9; } 50%, 90% { opacity: .05; } 96%, 100% { opacity: .9; } }
@keyframes ls-blink   { 0%, 84% { opacity: .2; } 88%, 92% { opacity: 1; } 100% { opacity: .2; } }
@keyframes ls-trolley { from { transform: translateX(0); } to { transform: translateX(-92px); } }
@keyframes ls-cable   { to { transform: scaleY(1.7); } }
@keyframes ls-hook    { to { transform: translateY(42px); } }
@keyframes ls-bob     { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(1.4px) rotate(1.1deg); } }
@keyframes ls-glint   { 0%, 100% { opacity: 0; transform: translateX(0); } 50% { opacity: .42; transform: translateX(7px); } }

/* ── the card: the phone page's glass, on every screen ───────────────── */
body.ls-page .account-pages {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-start;
  padding: calc(clamp(24px, 7vh, 72px) + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ls-page .account-pages > .container { padding-inline: 16px; }
body.ls-page .account-pages .col-xl-5 { flex: 0 0 auto; width: 100%; max-width: 430px; }
body.ls-page .auth-card {
  margin: 0; border-radius: 28px !important; color: #E9F6F7;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .1) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -30px rgba(0, 0, 0, .6) !important;
}
body.ls-page .auth-card .card-body { padding: 34px 30px 28px !important; }
body.ls-page .auth-card .px-4 { padding-inline: 0 !important; }
body.ls-page .auth-logo .logo-dark { display: none !important; }
body.ls-page .auth-logo .logo-light { display: inline-block !important; }
body.ls-page .auth-logo-img { height: 84px !important; width: auto; max-width: none; }
body.ls-page .crm-name-text { color: #fff !important; letter-spacing: .14em; font-size: 1.05rem !important; }
body.ls-page .auth-card .text-muted { color: rgba(233, 246, 247, .7) !important; }
body.ls-page .auth-card .form-label { color: rgba(233, 246, 247, .85) !important; font-size: .8125rem; font-weight: 500; }
body.ls-page .auth-card .form-control {
  height: 52px; font-size: 16px !important; border-radius: 16px !important; color: #fff !important;
  background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
}
body.ls-page .auth-card .form-control::placeholder { color: rgba(255, 255, 255, .45); }
body.ls-page .auth-card .form-control:focus {
  border-color: rgba(var(--ls-mint), .9) !important; background: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 0 0 4px rgba(var(--ls-mint), .2) !important;
}
body.ls-page .auth-card .form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #2A5A61 inset !important; transition: background-color 9999s;
}
body.ls-page #loginBtn {
  height: 54px; border: 0 !important; border-radius: 18px !important;
  background: #fff !important; color: var(--ls-ink) !important; font-size: 1rem; font-weight: 700 !important;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55) !important;
}
body.ls-page #loginBtn:hover { background: #F0FAFA !important; }
body.ls-page #loginBtn:focus-visible { outline: 3px solid rgba(var(--ls-mint), .95); outline-offset: 3px; }
body.ls-page #alertBox .alert { border-radius: 14px; }

@media (max-width: 575.98px) {
  body.ls-page .auth-card .card-body { padding: 30px 20px 24px !important; }
  body.ls-page .auth-logo-img { height: 76px !important; }
}

/* ── still, for anyone who asks their device for less motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .ls-scene, .ls-scene * { animation: none !important; }
}