/* ============================================================
   Login Page — idempiere.dev branded override
   ============================================================ */

/* --- Design tokens (standalone — wp-login doesn't load theme CSS) --- */
:root {
  --color-primary: #006699;
  --color-primary-dark: #004d73;
  --color-primary-light: #e8f4fd;
  --color-text: #1a1a2a;
  --color-text-secondary: #555;
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;
  --color-border: #e2e8f0;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --radius-md: 8px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html[data-theme='dark'] {
  --color-primary: #6db3f2;
  --color-primary-dark: #5a9fd4;
  --color-primary-light: #1e2a35;
  --color-text: #e0e0e0;
  --color-text-secondary: #999;
  --color-bg: #1a1a2e;
  --color-surface: #1e1e2e;
  --color-border: #2d2d3f;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* --- Body: split-panel flex layout --- */
body.login {
  display: flex;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
}

/* --- Left panel: branding --- */
.login-branding {
  width: 45%;
  min-height: 100vh;
  background: linear-gradient(135deg, #003050 0%, #006699 50%, #0088bb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #fff;
  flex-shrink: 0;
}
.login-branding-logo {
  width: 120px;
  height: auto;
  margin-bottom: 1.5rem;
}
.login-branding-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  text-align: center;
}
.login-branding-tagline {
  font-size: 1.1rem;
  opacity: 0.85;
  margin: 0;
  text-align: center;
}

/* --- Right panel: #login --- */
#login {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  background: var(--color-bg);
  min-height: 100vh;
}

/* Hide default WP logo on desktop (branding panel has logo) */
.login h1.wp-login-logo {
  display: none;
}

/* --- Tab navigation --- */
.login-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  max-width: 420px;
}
.login-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.login-tab:hover {
  color: var(--color-primary);
}
body.login-action-login .login-tab[data-action="login"],
body.login-action-register .login-tab[data-action="register"],
body.login-action-lostpassword .login-tab[data-action="lostpassword"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* Hide default nav links (replaced by tabs) */
#login #nav {
  display: none;
}

/* --- Form container --- */
#loginform,
#registerform,
#lostpasswordform {
  width: 100%;
  max-width: 420px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* --- Labels --- */
#login form p > label,
#login form .user-pass-wrap > label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.35rem;
}
#login form label br {
  display: none;
}

/* --- Input fields --- */
#login form input[type="text"],
#login form input[type="password"],
#login form input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.2s;
  box-sizing: border-box;
  margin: 0;
}
#login form input[type="text"]:focus,
#login form input[type="password"]:focus,
#login form input[type="email"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 153, 0.15);
}

/* --- Password toggle button --- */
.wp-pwd .button.wp-hide-pw {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.user-pass-wrap .wp-pwd {
  position: relative;
}

/* --- Remember me checkbox --- */
.forgetmenot label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* --- Submit button --- */
#login form .submit input[type="submit"],
#login form p.submit input[type="submit"] {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  margin-top: 0.5rem;
}
#login form .submit input[type="submit"]:hover,
#login form p.submit input[type="submit"]:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* --- Back to blog link --- */
#backtoblog {
  width: 100%;
  max-width: 420px;
  text-align: center;
  margin-top: 1.5rem;
}
#backtoblog a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
}
#backtoblog a:hover {
  color: var(--color-primary);
}

/* --- Error/success messages --- */
#login .message,
#login .success,
#login #login_error {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  box-sizing: border-box;
}
#login .message {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-text);
}
#login #login_error {
  border-left: 4px solid #d63638;
  background: #fcf0f1;
  color: #50575e;
}

/* --- Hide WP language switcher (we have our own) --- */
.language-switcher {
  display: none;
}

/* --- Dark mode overrides for hardcoded colors --- */
html[data-theme='dark'] body.login {
  background: var(--color-bg);
}
html[data-theme='dark'] .login-branding {
  background: linear-gradient(135deg, #001a2e 0%, #003050 50%, #004d73 100%);
}
html[data-theme='dark'] #login form input[type="text"]:focus,
html[data-theme='dark'] #login form input[type="password"]:focus,
html[data-theme='dark'] #login form input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(109, 179, 242, 0.2);
}
html[data-theme='dark'] #login form .submit input[type="submit"] {
  color: #1a1a2e;
}
html[data-theme='dark'] #login #login_error {
  background: #2a1a1a;
  border-left-color: #e65054;
  color: var(--color-text);
}
html[data-theme='dark'] #login .message {
  background: var(--color-primary-light);
  color: var(--color-text);
}
html[data-theme='dark'] .wp-pwd .button.wp-hide-pw {
  color: var(--color-text-secondary);
}

/* --- WP logo on mobile: show site name instead of WP logo --- */
.login h1.wp-login-logo a {
  background-image: none;
  text-indent: 0;
  width: auto;
  height: auto;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- Mobile: stack vertically + larger fonts --- */
@media (max-width: 767.98px) {
  body.login {
    flex-direction: column;
  }
  .login-branding {
    display: none;
  }
  #login {
    width: 100%;
    min-height: auto;
    padding: 2rem 1.5rem;
  }
  .login h1.wp-login-logo {
    display: block;
    margin-bottom: 1rem;
  }
  .login h1.wp-login-logo a {
    font-size: 1.6rem;
  }
  .login-tab {
    font-size: 1.3rem;
    padding: 1rem 0.5rem;
  }
  #login form p > label,
  #login form .user-pass-wrap > label {
    font-size: 1.25rem;
  }
  #login form input[type="text"],
  #login form input[type="password"],
  #login form input[type="email"] {
    font-size: 21px;
    padding: 16px 18px;
  }
  #login form .submit input[type="submit"],
  #login form p.submit input[type="submit"] {
    font-size: 1.35rem;
    padding: 16px;
  }
  .forgetmenot label {
    font-size: 1.2rem;
  }
  #backtoblog a {
    font-size: 1.2rem;
  }
}