/* ============================================================
   Nexus HCM — skin halaman Sign In (Fasa 3, skrin sebenar #1)
   [CHANGE] what: restyle the vendor sign-in to the Nexus identity — VISUAL ONLY
            · why: first real screen in the approved corporate identity
            · verify: open /sign-in on staging → navy/brass/serif, form still submits
   Overrides the vendor `style2.css` classes; loaded ONLY on the sign-in view
   (via @section('style')), so nothing here leaks to other pages. No markup,
   ID or JS selector is changed — the login form keeps working untouched.
   `!important` is used deliberately to win over the compiled vendor CSS without
   editing that 100k+ stylesheet.
   ============================================================ */

/* --- page ground: drop the vendor background image, use Nexus paper --- */
body.default-theme {
  background: var(--nx-paper) !important;
  font-family: var(--nx-sans) !important;
  color: var(--nx-ink) !important;
}

.auth-page, .auth-page .auth-container {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
}

/* --- the card --- */
.auth-page .form-wrapper {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  box-shadow: var(--nx-shadow);
  padding: 44px 44px !important;
  width: 100%; max-width: 440px;
}
.auth-page .form-container { width: 100%; }

/* --- brand: show the configured Nexus HCM logo, sized for the card --- */
.auth-page .form-logo { display: block !important; margin-bottom: 28px; text-align: left; }
.auth-page .form-logo .img-tag { display: inline-block; }
.auth-page .form-logo img { max-height: 46px; width: auto; }

/* --- heading: serif, institutional --- */
.auth-page .form-heading .title {
  font-family: var(--nx-serif) !important; font-weight: 600 !important;
  font-size: 26px !important; letter-spacing: -.01em; color: var(--nx-ink) !important;
  margin-bottom: 8px !important;
}
.auth-page .form-heading .subtitle { color: var(--nx-slate) !important; font-size: 14.5px !important; }

/* --- labels --- */
.auth-page .input-field-group { width: 100%; margin-bottom: 18px; }
.auth-page .input-field-group label {
  font-family: var(--nx-sans) !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--nx-slate) !important; margin-bottom: 6px !important; display: inline-block;
}
.auth-page .input-field-group sup { color: var(--nx-brass); }

/* --- inputs --- */
.auth-page .custom-input-field { position: relative; width: 100%; }
.auth-page .login__input {
  width: 100% !important; font-family: var(--nx-sans) !important; font-size: 14px !important;
  padding: 12px 14px !important; height: auto !important;
  border: 1px solid var(--nx-line) !important; border-radius: var(--nx-radius) !important;
  background: var(--nx-surface-2) !important; color: var(--nx-ink) !important;
  box-shadow: none !important;
}
.auth-page .login__input:focus {
  outline: 2px solid var(--nx-steel) !important; outline-offset: 1px;
  border-color: var(--nx-steel) !important; background: var(--nx-surface) !important;
}
.auth-page .password-input .la-eye {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--nx-slate); cursor: pointer;
}

/* --- primary button --- */
.auth-page .submit-btn, .auth-page .__login_btn {
  width: 100% !important; font-family: var(--nx-sans) !important; font-size: 15px !important;
  font-weight: 600 !important; color: var(--nx-on-navy) !important;
  background: var(--nx-navy) !important; border: 1px solid var(--nx-navy) !important;
  border-radius: var(--nx-radius) !important; padding: 12px 18px !important;
  transition: filter .15s; box-shadow: none !important;
}
.auth-page .submit-btn:hover, .auth-page .__login_btn:hover { filter: brightness(1.12); }
.auth-page .submit-btn:focus-visible { outline: 2px solid var(--nx-steel) !important; outline-offset: 2px; }

/* --- forgot-password link --- */
.auth-page .fogotPassword { color: var(--nx-steel) !important; font-size: 13.5px; text-decoration: none; }
.auth-page .fogotPassword:hover { text-decoration: underline; }

/* --- demo quick-login buttons: ghost --- */
.auth-page .__demo_login_btn {
  width: 100% !important; background: transparent !important; color: var(--nx-ink) !important;
  border: 1px solid var(--nx-line) !important; border-radius: var(--nx-radius) !important;
  font-size: 13px !important; padding: 9px 12px !important; margin-top: 8px;
}
.auth-page .__demo_login_btn:hover { border-color: var(--nx-navy) !important; color: var(--nx-navy) !important; }

/* --- error alert --- */
.auth-page .alert-danger {
  background: var(--nx-crit-bg) !important; color: var(--nx-crit) !important;
  border: 1px solid var(--nx-crit) !important; border-radius: var(--nx-radius) !important;
  font-size: 13.5px; padding: 10px 13px;
}

/* --- footer links --- */
.auth-page .auth-container + * a,
.auth-page section > .d-flex small a { color: var(--nx-slate) !important; text-decoration: none; }
.auth-page section .d-flex small a:hover { color: var(--nx-navy) !important; }