/* ================================================================
   MYTHRIL LOGIN - scoped web/login styling
   ----------------------------------------------------------------
   This asset is safe for web_include_css: visual rules are scoped to
   Frappe login/signup/forgot-password page roots.
   ================================================================ */

/* ================================================================
   GEIST - self-hosted variable fonts
   Served from /assets/mythril_theme/fonts/ (Frappe public asset route)
   ================================================================ */
@font-face {
  font-family: 'Geist';
  src: url('/assets/mythril_theme/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/mythril_theme/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/mythril_theme/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/assets/mythril_theme/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Login-local theme tokens. Keep scoped so website pages do not inherit desk styling. */
body:has(section.for-login),
body:has(section.for-email-login),
body:has(section.for-signup),
body:has(section.for-forgot),
body:has(section.for-login-with-email-link),
body.for-login {
  --background: #fcfcfc;
  --foreground: #303030;
  --card: #ffffff;
  --primary: #303030;
  --primary-foreground: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #525252;
  --border: #e4e4e4;
  --input: #ebebeb;
  --ring: #303030;
  --font-sans: Geist, sans-serif;
}

[data-theme="dark"] body:has(section.for-login),
[data-theme="dark"] body:has(section.for-email-login),
[data-theme="dark"] body:has(section.for-signup),
[data-theme="dark"] body:has(section.for-forgot),
[data-theme="dark"] body:has(section.for-login-with-email-link),
[data-theme="dark"] body.for-login,
body[data-theme="dark"]:has(section.for-login),
body[data-theme="dark"]:has(section.for-email-login),
body[data-theme="dark"]:has(section.for-signup),
body[data-theme="dark"]:has(section.for-forgot),
body[data-theme="dark"]:has(section.for-login-with-email-link),
body.for-login[data-theme="dark"] {
  --background: #303030;
  --foreground: #ffffff;
  --card: #090909;
  --primary: #ffffff;
  --primary-foreground: #303030;
  --muted: #1d1d1d;
  --muted-foreground: #a4a4a4;
  --border: #242424;
  --input: #333333;
  --ring: #a4a4a4;
}

/* ================================================================
   LOGIN PAGE - Modern
   Wider card, larger inputs (44px), strong type hierarchy with
   subtitle, subtle dot-grid background that fades to edges,
   refined CTA with hover lift.
   ================================================================ */

/* Body - scoped via :has() to login pages only */
body:has(section.for-login),
body:has(section.for-email-login),
body:has(section.for-signup),
body:has(section.for-forgot),
body:has(section.for-login-with-email-link),
body.for-login {
  background: var(--background) !important;
  min-height: 100vh !important;
}

/* Atmospheric dot-grid background, masked to fade out at edges */
body:has(section.for-login)::before,
body:has(section.for-email-login)::before,
body:has(section.for-signup)::before,
body:has(section.for-forgot)::before,
body:has(section.for-login-with-email-link)::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, black 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, black 0%, transparent 100%);
  opacity: 0.65;
}

/* Section: centered column */
section.for-login,
section.for-email-login,
section.for-signup,
section.for-forgot,
section.for-login-with-email-link {
  background:      transparent !important;
  width:           100% !important;
  min-height:      100vh !important;
  position:        relative !important;
  padding:         max(8vh, 64px) 24px 64px !important;
  box-sizing:      border-box !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  z-index:         1 !important;
}

/* --- Header: logo + heading + subtitle --- */
.for-login .page-card-head,
.for-email-login .page-card-head,
.for-signup .page-card-head,
.for-forgot .page-card-head,
.for-login-with-email-link .page-card-head {
  text-align:     center !important;
  padding:        0 0 36px !important;
  margin:         0 !important;
  width:          100% !important;
  max-width:      440px !important;
  border-bottom:  none !important;
  font-size:      inherit !important;
  position:       relative !important;
  z-index:        2 !important;
}

.for-login .page-card-head img.app-logo,
.for-email-login .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo,
.for-login-with-email-link .page-card-head img.app-logo {
  height:     112px !important;
  max-height: 112px !important;
  width:      auto !important;
  margin:     0 0 36px !important;
}

[data-theme="dark"] .for-login .page-card-head img.app-logo {
  filter: brightness(0) invert(1) !important;
}

.for-login .page-card-head h4,
.for-email-login .page-card-head h4,
.for-signup .page-card-head h4,
.for-forgot .page-card-head h4,
.for-login-with-email-link .page-card-head h4 {
  display:        block !important;
  margin:         0 !important;
  color:          var(--foreground) !important;
  font-family:    var(--font-sans) !important;
  font-size:      28px !important;
  font-weight:    600 !important;
  letter-spacing: -0.035em !important;
  line-height:    1.15 !important;
}

/* Subtitle injected below the h4 */
.for-login .page-card-head::after,
.for-email-login .page-card-head::after,
.for-forgot .page-card-head::after,
.for-login-with-email-link .page-card-head::after {
  content:        'Enter your credentials to access the platform.';
  display:        block;
  margin-top:     10px;
  color:          var(--muted-foreground);
  font-family:    var(--font-sans);
  font-size:      15px;
  font-weight:    400;
  letter-spacing: -0.005em;
  line-height:    1.5;
}

/* --- Form card --- */
.for-login .login-content.page-card,
.for-email-login .login-content.page-card,
.for-signup .login-content.page-card,
.for-forgot .login-content.page-card,
.for-login-with-email-link .login-content.page-card {
  background:    var(--card) !important;
  border:        1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.06) !important;
  padding:       36px !important;
  width:         100% !important;
  max-width:     440px !important;
  margin:        0 auto !important;
  position:      relative !important;
  z-index:       2 !important;
}

[data-theme="dark"] .for-login .login-content.page-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

/* Form spacing */
.for-login .form-signin,
.for-login form,
.for-email-login form,
.for-signup form,
.for-forgot form,
.for-login-with-email-link form {
  max-width: 100% !important;
  margin:    0 !important;
}

.for-login .page-card-body { padding: 0 !important; }
.for-login .form-group     { margin-bottom: 14px !important; position: relative !important; }

/* Field wrappers */
.for-login .email-field,
.for-login .password-field,
.for-email-login .email-field,
.for-email-login .password-field,
.for-forgot .email-field,
.for-login-with-email-link .email-field {
  position: relative !important;
}

/* Field icons */
.for-login .field-icon,
.for-email-login .field-icon,
.for-forgot .field-icon,
.for-login-with-email-link .field-icon {
  position:  absolute !important;
  left:      14px !important;
  top:       50% !important;
  transform: translateY(-50%) !important;
  width:     16px !important;
  height:    16px !important;
  z-index:   2 !important;
  fill:      var(--muted-foreground) !important;
  color:     var(--muted-foreground) !important;
}

/* Show/hide password toggle */
.for-login .toggle-password,
.for-email-login .toggle-password {
  position:       absolute !important;
  right:          14px !important;
  top:            50% !important;
  transform:      translateY(-50%) !important;
  z-index:        2 !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  color:          var(--muted-foreground) !important;
  cursor:         pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin:         0 !important;
  transition:     color 140ms ease !important;
}

.for-login .toggle-password:hover { color: var(--foreground) !important; }

/* Inputs - 44px, refined */
.for-login .form-control,
.for-login input[type="text"],
.for-login input[type="email"],
.for-login input[type="password"],
.for-email-login .form-control,
.for-signup .form-control,
.for-forgot .form-control,
.for-login-with-email-link .form-control {
  background:    var(--card) !important;
  border:        1px solid var(--border) !important;
  border-radius: 9px !important;
  color:         var(--foreground) !important;
  font-family:   var(--font-sans) !important;
  font-size:     15px !important;
  font-weight:   400 !important;
  height:        44px !important;
  padding:       0 50px 0 42px !important;
  margin:        0 !important;
  box-shadow:    none !important;
  transition:    border-color 150ms ease, box-shadow 150ms ease !important;
}

.for-login .form-control:focus,
.for-login input:focus {
  background:   var(--card) !important;
  border-color: var(--ring) !important;
  box-shadow:   0 0 0 4px rgba(48, 48, 48, 0.08) !important;
  outline:      none !important;
}

[data-theme="dark"] .for-login .form-control:focus,
[data-theme="dark"] .for-login input:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08) !important;
}

.for-login .form-control::placeholder,
.for-login input::placeholder {
  color:   var(--muted-foreground) !important;
  opacity: 0.55 !important;
}

/* Forgot password link */
.for-login .forgot-password-message {
  text-align:  right !important;
  margin:      6px 0 22px !important;
  line-height: 1 !important;
}

.for-login .forgot-password-message > a {
  color:           var(--muted-foreground) !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  transition:      color 140ms ease !important;
}

.for-login .forgot-password-message > a:hover { color: var(--foreground) !important; }

/* Actions */
.for-login .page-card-actions { margin: 0 !important; }

/* Primary CTA - refined, with hover lift */
.for-login .btn-primary,
.for-login .btn-login,
.for-email-login .btn-primary,
.for-signup .btn-primary,
.for-forgot .btn-primary,
.for-login-with-email-link .btn-primary {
  background:     var(--primary) !important;
  border:         1px solid var(--primary) !important;
  color:          var(--primary-foreground) !important;
  font-family:    var(--font-sans) !important;
  font-size:      15px !important;
  font-weight:    500 !important;
  letter-spacing: -0.005em !important;
  height:         44px !important;
  width:          100% !important;
  border-radius:  9px !important;
  cursor:         pointer !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition:     all 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin:         0 !important;
}

.for-login .btn-primary:hover {
  background:   #424242 !important;
  border-color: #424242 !important;
  box-shadow:
    0 4px 14px rgba(48, 48, 48, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform:    translateY(-1px) !important;
}

.for-login .btn-primary:active {
  background: #1f1f1f !important;
  transform:  translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .for-login .btn-primary:hover {
  background:   #f0f0f0 !important;
  border-color: #f0f0f0 !important;
}

/* "or" divider */
.for-login .login-divider,
.for-email-login .login-divider {
  text-align:     center !important;
  position:       relative !important;
  margin:         24px 0 !important;
  color:          var(--muted-foreground) !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border:         none !important;
}

.for-login .login-divider::before,
.for-login .login-divider::after {
  content:    '';
  position:   absolute;
  top:        50%;
  width:      calc(50% - 26px);
  height:     1px;
  background: var(--border);
}
.for-login .login-divider::before { left: 0; }
.for-login .login-divider::after  { right: 0; }

/* Secondary buttons - ghost style */
.for-login .btn-default,
.for-login .btn-login-option,
.for-login .btn-login-with-email-link {
  background:      var(--card) !important;
  border:          1px solid var(--border) !important;
  color:           var(--foreground) !important;
  font-family:     var(--font-sans) !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  height:          44px !important;
  width:           100% !important;
  border-radius:   9px !important;
  box-shadow:      none !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  transition:      all 140ms ease !important;
}

.for-login .btn-default:hover,
.for-login .btn-login-option:hover {
  background:   var(--muted) !important;
  border-color: var(--input) !important;
}

.for-login .social-logins,
.for-login .social-login-buttons { margin-top: 0 !important; }

.for-login .login-button-wrapper {
  padding:       0 !important;
  margin-bottom: 8px !important;
  min-width:     100% !important;
}

.for-login .login-button-wrapper:last-child { margin-bottom: 0 !important; }

/* Sign-up footer */
.for-login .sign-up-message,
.for-email-login .sign-up-message,
.for-signup .sign-up-message,
.for-forgot .sign-up-message,
.for-login-with-email-link .sign-up-message {
  color:      var(--muted-foreground) !important;
  font-size:  14px !important;
  margin-top: 28px !important;
  text-align: center !important;
  width:      100% !important;
  max-width:  440px !important;
  position:   relative !important;
  z-index:    2 !important;
}

.for-login .sign-up-message a {
  color:           var(--foreground) !important;
  font-weight:     500 !important;
  text-decoration: none !important;
}

.for-login .sign-up-message a:hover {
  text-decoration:        underline !important;
  text-underline-offset:  3px !important;
}

/* Strip login-only web nav/footer chrome */
body:has(section.for-login) .web-footer,
body:has(section.for-email-login) .web-footer,
body:has(section.for-signup) .web-footer,
body:has(section.for-forgot) .web-footer,
body:has(section.for-login-with-email-link) .web-footer,
body.for-login .web-footer,
body:has(section.for-login) .page-content-wrapper > .navbar:not(.desk),
body:has(section.for-email-login) .page-content-wrapper > .navbar:not(.desk),
body:has(section.for-signup) .page-content-wrapper > .navbar:not(.desk),
body:has(section.for-forgot) .page-content-wrapper > .navbar:not(.desk),
body:has(section.for-login-with-email-link) .page-content-wrapper > .navbar:not(.desk),
body.for-login .page-content-wrapper > .navbar:not(.desk),
.for-login + .web-footer,
.for-email-login + .web-footer,
.for-signup + .web-footer,
.for-forgot + .web-footer,
.for-login-with-email-link + .web-footer { display: none !important; }