/* =========================================================
   Mosaic background (site-wide) + Login card (login page)
   - login-canvas: centred login layout + interactive tiles
   - mosaic-canvas: site-wide background only (no pointer capture)
   ========================================================= */

/* ---------------- Variables (scoped) ------------------- */
.login-canvas,
.mosaic-canvas {
  --sm8:#00a859;
  --sm8-700:#007a42;
  --bg:#f5f7fa;
  --tile:132px;
  --gap:4px;
  --card-w:460px;
  --radius:12px;
  --border:#e5e7eb;
  --shadow1:0 28px 56px rgba(0,0,0,.12);
  --shadow2:0 6px 16px rgba(0,0,0,.08);
}

/* Scoped reset to avoid site-wide impact */
.login-canvas, .login-canvas * ,
.mosaic-canvas, .mosaic-canvas * { box-sizing:border-box; }

/* ---------------- Canvas containers -------------------- */
.login-canvas{
  position:relative; width:100%; height:100vh;
  display:grid; place-items:center; overflow:hidden;
  background:var(--bg); color:#111827;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

/* Site-wide wrapper uses flex so footer stays at bottom */
.mosaic-canvas{
  position:relative; width:100%; min-height:100vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:#111827;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}
/* Ensure page chrome/content sits above the background */
.mosaic-canvas > *{ position:relative; z-index:1; }

/* ---------------- Mosaic grids ------------------------- */
/* Login page: interactive (hover + mousemove highlight) */
.login-canvas .tiles{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:repeat(var(--cols), auto);
  grid-auto-rows:auto;
  gap:var(--gap); padding:var(--gap);
  z-index:0; pointer-events:auto;
}
.login-canvas .tiles > div{ border-radius:6px; }

/* Site pages: decorative only; don’t intercept clicks */
.mosaic-canvas .mosaic-tiles{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:repeat(var(--cols), auto);
  grid-auto-rows:auto;
  gap:var(--gap); padding:var(--gap);
  z-index:0; pointer-events:none;
}
.mosaic-canvas .mosaic-tiles > div{ border-radius:6px; }

/* ---------------- Pieces (shared) ---------------------- */
.login-canvas .piece,
.mosaic-canvas .mosaic-piece{
  border-radius:6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 10px 26px rgba(255,255,255,.13);
  transition:background-color 120ms ease, transform 60ms ease;
  will-change:background-color, transform;
}
.login-canvas .piece:hover,
.mosaic-canvas .mosaic-piece:hover{ transform:translateY(-1px); }

/* ---------------- Login card (login only) --------------- */
.login-canvas .card{
  position:relative; z-index:1;
  width:min(var(--card-w), 92vw);
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow1), var(--shadow2);
  padding:32px 28px 22px;
  display:flex; flex-direction:column; align-items:center;
}
.login-canvas .brand-row{ display:flex; justify-content:center; align-items:center; margin-bottom:6px; }
.login-canvas .brand-row img{ height:48px; width:auto; }
.login-canvas h2{ margin:8px 0 18px; font-weight:800; letter-spacing:.04em; }

/* Form controls (scoped) */
.login-canvas .form{ width:100%; }
.login-canvas .group{ margin-bottom:14px; }
.login-canvas input{
  width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:10px; background:#f3f4f6; font-size:14px; color:#111827; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.login-canvas .btn{
  display:block; width:100%;
  background:var(--sm8); color:#fff; font-weight:700;
  border:none; border-radius:10px; padding:12px 14px; cursor:pointer;
  transition:background .18s ease, transform .06s ease;
  margin-top:6px;
}
.login-canvas .btn:hover{ background:var(--sm8-700); }
.login-canvas .btn:active{ transform:translateY(1px); }

.login-canvas .card-footer-logos{
  display:flex; justify-content:center; align-items:center;
  margin-top:14px; padding-top:10px; border-top:1px dashed #e9eef5;
}
.login-canvas .card-footer-logos img{ height:24px; width:auto; opacity:.95; }

/* ---------------- Responsive ---------------------------- */
@media (max-width:520px){
  .login-canvas, .mosaic-canvas{ --tile:96px; }
  .login-canvas .brand-row img{ height:40px; }
}