/* caisse1 staff login — simpler + guaranteed mobile-fit (no scrolling to reach
   the login button). The bundle login (.gv-login-root) is a tall two-column
   hero+card layout; on phones the hero pushes the form down. This override:
   - hides the marketing hero (.gv-side) on small screens,
   - centers a compact card that always fits within the viewport,
   - keeps the desktop two-column look on wide screens.
   Scoped to .gv-login-root so it only touches the login page. */

/* ---------- MOBILE / SHORT SCREENS: single compact card, no scroll ---------- */
@media (max-width: 820px), (max-height: 700px) {
  .gv-login-root .gv-login-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: 14px !important;
  }
  /* drop the big marketing hero on phones — it's what forces scrolling */
  .gv-login-root .gv-side { display: none !important; }

  .gv-login-root .gv-main {
    width: 100% !important;
    max-width: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .gv-login-root .gv-card {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
  }
  .gv-login-root .gv-card-inner { padding: 22px 20px !important; }
  /* trim the vertical rhythm so everything fits above the fold */
  .gv-login-root .gv-card-head { margin-bottom: 14px !important; }
  .gv-login-root .gv-card-kicker { margin-bottom: 2px !important; }
  .gv-login-root .gv-card-title { font-size: 22px !important; margin: 2px 0 !important; }
  .gv-login-root .gv-card-sub { font-size: 13px !important; margin: 2px 0 0 !important; }
  .gv-login-root .gv-field { margin-bottom: 12px !important; }
  /* keep inputs >=16px so iOS doesn't zoom */
  .gv-login-root .gv-input { font-size: 16px !important; }

  /* calm the animated background so it reads clean on mobile */
  .gv-login-root .gv-bg-flame,
  .gv-login-root .gv-bg-yellow,
  .gv-login-root .gv-grid { opacity: .5 !important; }
  /* the "Retour" link can overlap on tiny screens — keep it subtle/out of the way */
  .gv-login-root .gv-back { top: 10px !important; left: 10px !important; }
}

/* ---------- VERY SHORT SCREENS (landscape phones): extra tightening -------- */
@media (max-height: 560px) {
  .gv-login-root .gv-card-inner { padding: 16px 18px !important; }
  .gv-login-root .gv-card-head { margin-bottom: 10px !important; }
  .gv-login-root .gv-card-title { font-size: 19px !important; }
  .gv-login-root .gv-card-sub { display: none !important; }
  .gv-login-root .gv-field { margin-bottom: 9px !important; }
}