/* ============================================================
   login.css - modern card styling for the dashboard login / 2FA
   screens, matching the Hire Shop customer login look.
   ============================================================ */

/* Login page: full-height column so the footer sits at the bottom, and kill the
   left grey "left-menu" gradient bar that head-tag-contents paints on body. */
body.lg-body-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eef1f4 !important;
  background-image: none !important;
}

.lg-page {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 16px;
  box-sizing: border-box;
  background-image: url(https://dashboard.avxpert.co.uk/images/branding/slide-background-image.webp);
  background-size: cover;
  background-position: right bottom;
}

.lg-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(31, 39, 51, .12);
  overflow: hidden;
}

/* Header band */
.lg-head {
  text-align: center;
  padding: 34px 30px 30px;
  background: linear-gradient(160deg, #eaf7fd 0%, #cfeafb 100%);
}
.lg-badge {
  width: 76px; height: 76px; margin: 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #bfe6f7; color: #2b8cba; font-size: 30px;
}
.lg-eyebrow {
  margin: 18px 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #6b7785;
}
.lg-title { margin: 0; font-size: 26px; font-weight: 700; color: #1f2733; line-height: 1.2; }

/* Body */
.lg-body { padding: 28px 34px 34px; }
.lg-sub { margin: 0 0 24px; font-size: 15px; color: #7a8699; }

.lg-field { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.lg-field > .wiggle-icon { flex: 0 0 28px; width: 28px; text-align: center; font-size: 22px; color: #5a6675; transition: color .35s ease; }
/* Icon flashes AV Xpert blue only while it is wiggling, then fades back to grey
   (JS removes .animate-wiggle on animationend, so the transition does the fade). */
.wiggle-icon.animate-wiggle { color: #45b3e3; }

.lg-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.lg-label {
  position: absolute; top: -11px; left: 12px;
  background: #fff; padding: 1px 6px;
  font-size: 12px; font-weight: 600; color: #1f2733; border-radius: 4px;
}
.lg-input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px; font-size: 15px; color: #1f2733;
  border: 1px solid #e6edf5; border-radius: 14px; background: #eef4fb;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lg-input:focus { outline: none; border-color: #9fd2ee; background: #fff; box-shadow: 0 0 0 3px rgba(69, 179, 227, .18); }

.lg-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; padding: 10px 16px; cursor: pointer;
  border: 1px solid #5bb8e8; border-radius: 14px;
  background: #5bb8e8; color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.lg-btn:hover { background: #45a8df; border-color: #45a8df; }

.lg-forgot { display: inline-block; margin-top: 20px; color: #3a9fd0; text-decoration: none; font-weight: 500; }
.lg-forgot:hover { text-decoration: underline; }

/* Trust-device checkbox + secondary actions (2FA) */
.lg-check { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-size: 14px; color: #1f2733; cursor: pointer; }
.lg-check input { width: 17px; height: 17px; accent-color: #45b3e3; cursor: pointer; }
.lg-actions { display: flex; gap: 18px; margin-top: 18px; }
.lg-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: #3a9fd0; }
.lg-link:hover { text-decoration: underline; }

/* Inherit the app's message colours but give them room */
.lg-msg { margin: 0 0 18px; float: left; }
.lg-msg .pw-msg, .lg-msg .pws-msg { margin: 0; }
form#login-form { clear: both; }

@media (max-width: 560px) {
  .lg-head { padding: 28px 20px 24px; }
  .lg-title { font-size: 22px; }
  .lg-body { padding: 24px 20px 28px; }
}