/* SkyEngPro — pre-auth pages (login / signup / forgot password).
 *
 * Frappe ships a centred card on grey. This replaces it with the brand's
 * split screen: identity holds the left, the form stays plain on the right.
 *
 * Built as a ::before pseudo-element rather than injected DOM, so it needs
 * no JS, works on pages where boot_session never runs, and cannot fight
 * Frappe's markup.
 *
 * The tagline is a CSS custom property so a single site can override it
 * without an app release — set --skyeng-login-tagline in a Website Theme.
 * That matters operationally: dev and prod must not look identical, or
 * someone will eventually act on production believing it is dev.
 */

:root {
  --sky-ink:    #1D1E22;
  --sky-stone:  #F1EEE8;
  --sky-signal: #FF6600;
  --sky-ember:  #C25400;
  --skyeng-login-tagline: "One platform. Every operation.";
  --skyeng-login-panel-bg: #1D1E22;
  --skyeng-login-tagline-color: #FF6600;
}

body[data-path="login"] {
  margin: 0;
  background: var(--sky-stone);
}

#page-login {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
  background: var(--sky-stone);
}

#page-login::before {
  content: var(--skyeng-login-tagline);
  background:
    var(--skyeng-login-panel-bg)
    var(--skyeng-login-logo,
        url("/assets/skyengpro_brand/brand/skyengpro/wordmark_white_800x220.png"))
    no-repeat center calc(50% - 46px) / 236px auto;
  color: var(--skyeng-login-tagline-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 2rem 0;
}

#page-login .page-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
#page-login .container,
#page-login .page_content { width: 100%; max-width: 400px; }
#page-login .page-breadcrumbs,
#page-login .page-header-wrapper { display: none; }

/* Redundant beside the brand panel. */
#page-login .page-card-head .app-logo { display: none; }

#page-login .page-card-head {
  background: transparent;      /* overrides the dark head from skyengpro.css */
}
#page-login .page-card-head h4,
#page-login .page-card-head .page-card-title {
  color: var(--sky-ink);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-align: left;
  margin: 0 0 1.4rem;
}

#page-login .login-content.page-card {
  background: #FFFFFF;
  border: 1px solid #E3DDD2;
  border-radius: 3px;
  box-shadow: none;
  padding: 1.6rem;
}

#page-login .form-control {
  border-radius: 2px;
  border: 1px solid #DDD7CC;
  background: var(--sky-stone);
}
#page-login .form-control:focus {
  border-color: var(--sky-ember);
  box-shadow: 0 0 0 2px rgba(194, 84, 0, 0.15);
}

#page-login .btn-primary,
#page-login .btn-login {
  background: var(--sky-ember);
  border-color: var(--sky-ember);
  border-radius: 2px;
  font-weight: 700;
  padding: 0.6rem 1rem;
}
#page-login .btn-primary:hover,
#page-login .btn-login:hover { background: #A84800; border-color: #A84800; }

#page-login .forgot-password-message a { color: var(--sky-ember); }

/* Frappe renders a site <nav class="navbar"> above #page-login. The identity
   is now carried by the split panel, so that strip is redundant — and
   skyengpro.css tints it, so it reads as a coloured band across the top of
   the login screen. The LMS login on academy emits no such nav, and matching
   it is the point. */
body[data-path="login"] nav.navbar,
body[data-path="login"] header.navbar {
  display: none !important;
}

@media (max-width: 780px) {
  #page-login { grid-template-columns: 1fr; }
  #page-login::before {
    min-height: 190px;
    background-size: 180px auto;
    background-position: center calc(50% - 26px);
    padding-top: 58px;
  }
}