/* ════════════════════════════════════════════════════════════════════════
   Login Page — Clean Light Split-Panel Theme  |  Nemi Digital Twin
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Full-screen overlay ─────────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: stretch; justify-content: stretch;
  /* Page grid: 40px lattice on white, with a soft dim sweeping in from the
     left edge. Layer order is top-most first. */
  background:
    linear-gradient(90deg, rgba(20,60,42,.07) 0%, rgba(20,60,42,.02) 30%, rgba(20,60,42,0) 55%),
    linear-gradient(rgba(20,60,42,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,60,42,.11) 1px, transparent 1px),
    #ffffff;
  background-size: 100% 100%, 40px 40px, 40px 40px, 100% 100%;
  transition: opacity .5s ease;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
#login-overlay.hidden { opacity: 0; pointer-events: none; }

/* ── Card — full-screen flex row ─────────────────────────────────────── */
.login-card {
  display: flex;
  width: 100%; height: 100%;
  /* transparent so the overlay's page grid reads through */
  background: transparent;
  position: relative;
  overflow: hidden;
  animation: lcFadeIn .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lcFadeIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════
   LEFT — Visual Panel
   ══════════════════════════════════════════════════════════════════════ */
.login-visual {
  position: relative;
  flex: 0 0 68%;
  overflow: hidden;
  background: transparent;
}

/* The edge fades blended an opaque photo into the form panel. The hero is
   now a transparent cut-out sitting on the page grid, so these would just
   paint a solid band across the grid — disabled. */
.login-visual::after,
.login-visual::before { content: none; }

/* Hero image fills the panel */
#login-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Brand badge — top left, floats over canvas */
.login-vis-brand {
  position: absolute;
  top: 24px; left: 28px;
  display: flex; align-items: center; gap: 10px;
  z-index: 20;
}
/* BNC mark, rendered black. The source PNG is a white mark on transparency,
   so brightness(0) zeroes the RGB channels while leaving alpha — including
   its feathered edges — untouched. That keeps one logo asset rather than a
   second black copy to keep in sync. No tile, border or shadow. */
.login-vis-brand .login-brand-mark {
  width: 34px; height: 22px;
  object-fit: contain;
  filter: brightness(0);
  flex-shrink: 0;
  display: block;
}
.login-vis-brand span {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0a4938;
  /* Mixed-case brand name, so the uppercase transform is off and the
     tracking is tightened from 2.5px to suit lowercase letterforms. */
  letter-spacing: 1.2px;
  text-transform: none;
}

/* Bottom feature icons bar */
.login-features {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 13px 20px 15px;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(37,99,235,0.08);
  z-index: 10;
}
.login-feat {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.login-feat-icon {
  width: 38px; height: 38px;
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #2563eb;
}
.login-feat span {
  font-size: .60rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  line-height: 1.3;
  max-width: 72px;
}

/* ══════════════════════════════════════════════════════════════════════
   RIGHT — Form Panel
   ══════════════════════════════════════════════════════════════════════ */
.login-form-panel {
  flex: 0 0 32%;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2.5rem;
  border-left: none;
  overflow-y: auto;
  position: relative;
}

.login-form-inner {
  width: 100%;
  max-width: 320px;
}

/* Heading */
.lfp-heading {
  font-size: 2.2rem;
  font-weight: 700;
  /* Same blue as the Continue button. base.css gives every <h1> a gradient
     with `-webkit-text-fill-color: transparent`, which would otherwise mask
     `color` entirely — so the gradient and its shimmer are cancelled here. */
  color: #0a4938;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: #0a4938;
  animation: none;
  margin: 0 0 .45rem;
  letter-spacing: -.5px;
  line-height: 1.2;
  text-transform: none;
}

/* Subtext */
.lfp-sub {
  font-size: .84rem;
  color: #64748b;
  margin-bottom: 2rem;
  font-weight: 400;
  line-height: 1.55;
}


/* Error banner */
.login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: .78rem;
  padding: .65rem .9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: none;
}

/* Steps */
.login-step { display: none; }
.login-step.active {
  display: block;
  animation: stepIn .35s ease both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fields */
.lf-field { margin-bottom: 1.1rem; }
.lf-label {
  display: block;
  font-size: .83rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 7px;
  text-transform: none;
  letter-spacing: 0;
}
.lf-input-wrap { position: relative; display: flex; align-items: center; }
.lf-icon { display: none; }   /* hidden — no left icon in new design */

.lf-input-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  background: #ffffff;
  border: 1.5px solid rgba(20,60,42,.20);
  border-radius: 10px;
  color: #0f172a;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-family: inherit;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}
/* Extra right padding when eye-btn present */
.lf-input-wrap:has(.lf-eye-btn) input { padding-right: 2.8rem; }
.lf-input-wrap input::placeholder { color: #8a9a92; }
.lf-input-wrap input:hover  { border-color: rgba(20,60,42,.34); background: #ffffff; }
.lf-input-wrap input:focus  {
  background: #ffffff;
  border-color: #0a4938;
  box-shadow: 0 0 0 3px rgba(10,73,56,0.14), 0 1px 4px rgba(10,73,56,0.10);
  transform: translateY(-1px);
}

/* Eye toggle */
.lf-eye-btn {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; padding: 4px;
  color: #9ca3af; transition: color .2s; z-index: 2;
}
.lf-eye-btn:hover { color: #374151; }

/* Primary button */
.lf-btn {
  width: 100%;
  height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: #0a4938;
  border: none;
  color: #fff;
  font-size: .94rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow .2s, transform .12s, filter .2s;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(10,73,56,0.30), 0 1px 3px rgba(10,73,56,0.18);
  letter-spacing: .2px;
  margin-top: .4rem;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep */
.lf-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -80%;
  width: 55%; height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  animation: lfBtnShimmer 3.8s ease 2s infinite;
  pointer-events: none;
}
@keyframes lfBtnShimmer {
  0%   { left: -80%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.lf-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(10,73,56,0.40);
  transform: translateY(-1px);
}
.lf-btn:active { transform: scale(.98); box-shadow: none; filter: none; }
.lf-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

/* Extra options row */
.lf-extra-options {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem; margin-bottom: 1.4rem;
  font-size: .80rem;
}
.lf-remember-me {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; color: #4b5563; user-select: none; font-weight: 500;
}
.lf-remember-me input { width: 15px; height: 15px; accent-color: #0a4938; cursor: pointer; }
.lf-forgot-link {
  color: #0a4938; text-decoration: none; font-weight: 500;
  transition: color .2s;
}
.lf-forgot-link:hover { color: #10A37E; text-decoration: underline; }

/* Company badge (step 2) */
/* Reads as a filled field, matching the Operator ID / Access Key inputs
   below it — same height, padding, radius and border. Previously a white
   border on white, i.e. invisible on the light page. */
.login-company-badge {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px;
  background: #ffffff;
  border: 1.5px solid rgba(20,60,42,.20);
  color: #17241e;
  font-size: .85rem; font-weight: 500;
  padding: 0 1rem; border-radius: 10px;
  margin-bottom: 1.1rem;
  box-sizing: border-box;
}
.login-company-badge span { font-weight: 600; color: #17241e; }
.login-company-badge .change-btn {
  background: none; border: none; color: #0a4938; cursor: pointer;
  font-size: .80rem; font-weight: 600; text-decoration: underline;
  font-family: inherit; padding: 0; transition: color .2s;
}
.login-company-badge .change-btn:hover { color: #10A37E; }

/* ════════════════════════════════════════════════════════════════════════
   STEP TRANSITION — wave-sweep is a simple fade overlay on the form panel
   ════════════════════════════════════════════════════════════════════════ */
.lc-cin-overlay { display: none !important; }
.login-visual, .login-form-panel { will-change: auto; }

#wave-sweep {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32%;
  z-index: 8;
  background: rgba(255,255,255,0.97);
  pointer-events: none;
}
#wave-sweep.wave-advancing {
  display: block;
  animation: sweepFadeIn 0.52s ease forwards;
}
#wave-sweep.wave-retreating {
  display: block;
  animation: sweepFadeOut 0.56s ease forwards;
}
@keyframes sweepFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweepFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #login-overlay { padding: 0; }
  .login-card { flex-direction: column; }
  .login-visual { flex: 0 0 48%; }
  .login-form-panel {
    flex: 1;
    border-left: none; border-top: 1px solid #e2e8f0;
    padding: 2rem 1.8rem;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 2.5rem;
  }
  .login-form-inner { max-width: 100%; }
  #wave-sweep { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Add Floor Modal — dark glass theme (unchanged)
   ════════════════════════════════════════════════════════════════════════ */
#floor-modal {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
#floor-modal.visible { display: flex; }
#floor-modal .modal-card { width: 420px; max-width: 92vw; background: rgba(20,28,38,.95); border: 1px solid rgba(0,204,170,.3); border-radius: 14px; padding: 1.8rem; box-shadow: 0 8px 60px rgba(0,0,0,.7), 0 0 30px rgba(0,204,170,.1); }
#floor-modal .modal-header  { display: flex; align-items: center; gap: 12px; margin-bottom: 1.2rem; }
#floor-modal .modal-icon    { width: 44px; height: 44px; border-radius: 10px; background: rgba(0,204,170,.12); border: 1px solid rgba(0,204,170,.3); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #00ccaa; }
#floor-modal .modal-title   { font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.2; }
#floor-modal .modal-sub     { font-size: .72rem; color: #00ccaa; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
#floor-modal .modal-field   { margin-bottom: 1rem; }
#floor-modal .modal-field label { display: block; font-size: .72rem; color: rgba(0,204,170,.7); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
#floor-modal .modal-field input { width: 100%; padding: .7rem .85rem; background: rgba(0,204,170,.04); border: 1px solid rgba(0,204,170,.2); border-radius: 8px; color: #d8d8d8; font-size: .92rem; outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit; box-sizing: border-box; }
#floor-modal .modal-field input:focus { border-color: rgba(0,204,170,.6); box-shadow: 0 0 12px rgba(0,204,170,.15); }
#floor-modal .modal-field input::placeholder { color: rgba(0,204,170,.3); }
#floor-modal .modal-error   { color: #f85149; font-size: .78rem; margin-top: .4rem; display: none; }
#floor-modal .modal-error.visible { display: block; }
#floor-modal .modal-actions { display: flex; gap: 8px; margin-top: 1.4rem; }
#floor-modal .modal-btn     { flex: 1; padding: .7rem; border-radius: 8px; font-size: .82rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .2s; font-family: inherit; }
#floor-modal .modal-btn.primary   { background: rgba(0,204,170,.15); border: 1px solid rgba(0,204,170,.4); color: #00ccaa; }
#floor-modal .modal-btn.primary:hover { background: rgba(0,204,170,.25); border-color: rgba(0,204,170,.6); box-shadow: 0 0 18px rgba(0,204,170,.15); }
#floor-modal .modal-btn.secondary { background: transparent; border: 1px solid rgba(255,255,255,.15); color: #999; }
#floor-modal .modal-btn.secondary:hover { background: rgba(255,255,255,.05); color: #ccc; }