/* Microsourcing login page overrides
   Loaded via web_include_css — ms-theme.css tokens are NOT available here.
   Token source: Storybook-Documentation.docx v2.0 */

/* ─── Design tokens (login-page subset) ──────────────────────── */
:root {
  color-scheme: light dark; /* page supports both; required for prefers-color-scheme to fire in managed browsers */

  --ms-brand:              #FC751C;
  --ms-brand-hover:        #FFBA89;
  --ms-bg-page:            #FAFAFA;
  --ms-bg-card:            #FFFFFF;
  --ms-text-primary:       #1A1A1A;
  --ms-text-secondary:     #444444;
  --ms-text-muted:         #8A8A8A;
  --ms-text-on-dark:       #FFFFFF;
  --ms-border-default:     #E8E8E8;
  --ms-radius-md:          8px;
  --ms-radius-lg:          10px;
  --ms-font-family:        "Neue Haas Grotesk Display Pro", system-ui, -apple-system, Arial, sans-serif;
  --ms-font-weight-normal: 400;
  --ms-font-weight-medium: 500;
}

/* ─── Page ────────────────────────────────────────────────────── */
body {
  background-color: var(--ms-bg-page) !important;
  font-family: var(--ms-font-family);
  -webkit-font-smoothing: antialiased;
}

/* ─── Logo: replace with Microsourcing mark ───────────────────── */
.page-card-head .app-logo {
  content: url('/assets/microsourcing_theme/images/logo.svg');
  max-height: 36px;
  height: auto;
  width: auto;
}

/* ─── Hide default app-name title ─────────────────────────────── */
.page-card-head h4 {
  display: none;
}

/* ─── Login card ─────────────────────────────────────────────── */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
  border-radius: var(--ms-radius-lg) !important;
  border-color: var(--ms-border-default) !important;
  background-color: var(--ms-bg-card) !important;
  font-family: var(--ms-font-family);
}

/* ─── Input fields ───────────────────────────────────────────── */
.page-card-body input[type="text"],
.page-card-body input[type="email"],
.page-card-body input[type="password"] {
  border: 1px solid var(--ms-border-default) !important;
  border-radius: var(--ms-radius-md) !important;
  background-color: var(--ms-bg-page) !important;
  color: var(--ms-text-primary) !important;
  font-family: var(--ms-font-family);
}

.page-card-body input[type="text"]:focus,
.page-card-body input[type="email"]:focus,
.page-card-body input[type="password"]:focus {
  border-color: var(--ms-brand) !important;
  box-shadow: 0 0 0 2px rgba(252, 117, 28, 0.15) !important;
  outline: none;
}

/* ─── Primary action buttons ─────────────────────────────────── */
.btn.btn-primary {
  background-color: var(--ms-brand) !important;
  border-color:     var(--ms-brand) !important;
  color:            var(--ms-text-on-dark) !important;
  font-family:      var(--ms-font-family);
  font-weight:      var(--ms-font-weight-medium);
  border-radius:    var(--ms-radius-md) !important;
}

.btn.btn-primary:hover {
  background-color: var(--ms-brand-hover) !important;
  border-color:     var(--ms-brand-hover) !important;
  color:            var(--ms-text-primary) !important;
}

.btn.btn-primary:focus-visible {
  box-shadow: 0 0 0 2px var(--ms-bg-card), 0 0 0 4px var(--ms-brand) !important;
  outline: none;
}

/* ─── Links: forgot password and sign-up ─────────────────────── */
.forgot-password-message a,
.sign-up-message a {
  color: var(--ms-brand);
}

.forgot-password-message a:hover,
.sign-up-message a:hover {
  color: var(--ms-text-primary);
  text-decoration: underline;
}

/* ─── Field icons (envelope / lock SVGs) ─────────────────────── */
.field-icon {
  fill: var(--ms-text-muted) !important;
}

/* ─── Dark mode: follow system preference ────────────────────────
   The login page has no user session, so Frappe never sets
   [data-theme] here. System preference is the only signal. */
@media (prefers-color-scheme: dark) {

  :root {
    --ms-bg-page:        #041820;
    --ms-bg-card:        #0D2027;
    --ms-text-primary:   #F0F0F0;
    --ms-text-secondary: #C8C8C8;
    --ms-text-muted:     #6B8A91;
    --ms-border-default: rgba(255, 255, 255, 0.10);
  }

  /* Page background */
  body {
    background-color: var(--ms-bg-page) !important;
  }

  /* Logo: switch to white-wordmark variant */
  .page-card-head .app-logo {
    content: url('/assets/microsourcing_theme/images/logo-dark.svg');
  }

  /* Card: Frappe hardcodes background-color: #fff in login.bundle.css */
  .for-login .page-card,
  .for-forgot .page-card,
  .for-signup .page-card,
  .for-email-login .page-card,
  .for-login-with-email-link .page-card {
    background-color: var(--ms-bg-card) !important;
    border-color: var(--ms-border-default) !important;
  }

  /* Input fields */
  .page-card-body input[type="text"],
  .page-card-body input[type="email"],
  .page-card-body input[type="password"] {
    background-color: var(--ms-bg-page) !important;
    color: var(--ms-text-primary) !important;
    border-color: var(--ms-border-default) !important;
  }

  .page-card-body input::placeholder {
    color: var(--ms-text-muted) !important;
  }

  /* Sign-up / back-to-login surrounding text */
  .sign-up-message {
    color: var(--ms-text-secondary) !important;
  }
}