/* ============================================================
   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;
}

/* A page that draws its card from a helper (reset-password.php) wraps it in this */
.lg-wrap { width: 100%; max-width: 640px; }

.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; }
/* On the sign-in forms (password, and without a password) the button lines
   up with the boxes above it, past their icons (28px + 16px gap). Not in the
   app, where the icon sits inside a full-width box. */
body:not(.lg-app) #login-form .lg-btn,
body:not(.lg-app) #al-form .lg-btn { margin-left: 44px; width: calc(100% - 44px); }
/* ...and the text links under them start in line with the boxes too */
body:not(.lg-app) #login-form + .lg-forgot,
body:not(.lg-app) #al-form + .lg-forgot { margin-left: 44px; }
/* The button as a link (Return to Login Page, Log In Now): main.css forces
   every link purple with !important, so these must too */
a.lg-btn, a.lg-btn:hover, a.lg-btn:visited { color: #fff !important; text-decoration: none; box-sizing: border-box; }
/* The new password's criteria, ticked off as it is typed (reset-password.php) */
.lg-criteria { margin: 4px 0 6px 44px; font-size: 14px; color: #5a6675; }
.lg-criteria p { margin: 0 0 6px; }
.lg-criteria ul { margin: 0; padding-left: 18px; }
.lg-criteria li { margin: 2px 0; }
.lg-btn:disabled, .lg-btn:disabled:hover {
  background: #9dd3ef; border-color: #9dd3ef; cursor: default;
}

.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; }
}

/* ============================================================
   Inside the AV Xpert Warehouse App (body.lg-app, set when
   avxInApp()): black, the drawn cube backdrop
   (includes/app-backdrop.php), and a translucent frosted panel
   the cubes show through. The site header and footer are the
   app's frame there, so they are left out.
   ============================================================ */
body.lg-body-page.lg-app { background: #000 !important; }
.lg-app .site-footer { display: none; }
.lg-geo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.lg-app .lg-page { background-image: none; padding: 32px 20px; }

.lg-app .lg-card {
  max-width: 420px;
  background: rgba(61, 69, 79, .3);   /* the Hire Shop grey, as a wash */
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(255, 255, 255, .05);
}
.lg-app .lg-head { background: none; padding: 26px 22px 4px; }
.lg-app .lg-badge { width: auto; height: auto; background: none; color: #45b3e3; font-size: 30px; }
.lg-app .lg-eyebrow { color: rgba(255, 255, 255, .6); }
.lg-app .lg-title { color: #fff; font-size: 21px; }
.lg-app .lg-body { padding: 18px 22px 22px; color: rgba(255, 255, 255, .75); }

/* Field: the icon sits inside the box and the label is the hint text */
.lg-app .lg-field { position: relative; display: block; }
.lg-app .lg-field > .wiggle-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; font-size: 17px; color: #45b3e3; z-index: 1; }
.lg-app .lg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.lg-app .lg-input {
  padding: 14px 16px 14px 44px; font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px;
}
.lg-app .lg-input::placeholder { color: rgba(255, 255, 255, .5); }
.lg-app .lg-input:focus { background: rgba(255, 255, 255, .1); border-color: #45b3e3; box-shadow: 0 0 0 3px rgba(69, 179, 227, .2); }
/* Buttons: dark and slightly see-through inside, AV Xpert blue edge */
.lg-app .lg-btn {
  background: rgba(8, 28, 40, .55); border: 1px solid #45b3e3; color: #fff;
  border-radius: 10px; padding: 13px 16px; font-size: 16px;
}
.lg-app .lg-btn:hover { background: rgba(14, 44, 62, .65); border-color: #45b3e3; }
.lg-app .lg-btn:disabled, .lg-app .lg-btn:disabled:hover { background: rgba(8, 28, 40, .4); border-color: rgba(69, 179, 227, .5); }
/* main.css forces every link purple with !important, so these must too */
.lg-app .lg-forgot, .lg-app .lg-link { color: rgba(255, 255, 255, .6) !important; }
.lg-app a.lg-forgot:hover, .lg-app .lg-link:hover { color: #fff !important; }
/* The switch to the other sign-in route: small, grey, centred */
.lg-app a.lg-alt-app { display: block; text-align: center; margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, .45) !important; }
.lg-app .lg-check { color: rgba(255, 255, 255, .8); }