/* Copyright (c) 2026, Stelden EA Ltd and contributors
   For license information, please see license.txt */

/* ── Default ──
   Original card-based login layout.
   Two-column card centred on page: left panel shows login_context_img
   (via the login.js mode-cover / mode-natural detection), right panel
   shows the login form. Background image on html/body is handled by
   seal_theme.css variables.
*/

/* ── Left panel: show with context image ── */
.layout-default .login-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Restore the app-logo img with JS mode classes */
.layout-default .login-left .app-logo {
  display: block;
  opacity: 0;
  transition: opacity 0.01s linear;
}

/* Reveal once JS has determined mode */
.layout-default .login-left .app-logo.is-ready {
  opacity: 1;
}

/* Mode 1: fill & crop (image larger than container) */
.layout-default .login-left .app-logo.mode-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Mode 2: natural size, centred (image smaller than container) */
.layout-default .login-left .app-logo.mode-natural {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* logo-top in right panel not needed */
.layout-default .login-logo-top {
  display: none;
}

/* Small screens: collapse left panel, show logo-top */
@media (max-width: 900px) {
  .layout-default .login-left {
    display: none;
  }
  .layout-default .login-logo-top {
    display: block;
  }
}