/* ===========================================================
   imanage — login redesign (Alabaster & Obsidian)
   ===========================================================

   Split-screen layout injected by imanage_login.v5.js:

     ┌──────────────────────┬───────────────────────┐
     │  Obsidian brand      │  Alabaster form       │
     │  (left, 40%)         │  (right, 60%)         │
     └──────────────────────┴───────────────────────┘

   The left panel is dark (obsidian #0A0A0B) with the wordmark, a
   feature list and product copy. The right panel is alabaster white
   with the Frappe login form restyled in the new palette.

   Loaded via `web_include_css` in hooks.py — applies to /login,
   /signup, /update-password, /forgot-password and the /#login flow.

   Font is Inter Tight, loaded from the same Google Fonts family as
   the marketing site and the SPA design system for one consistent
   type voice across the whole product surface.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap');

/* ── Reset the Frappe web layout so we can fill the viewport ── */
body,
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #fdfdfd;
  color: #0a0a0b;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Frappe's website header / navbar / footer are all irrelevant on
   the sign-in surface. Hide them so our split layout owns the whole
   viewport. */
.navbar,
header.navbar,
.web-footer,
footer.web-footer,
.web-sidebar,
.website-list-preview,
#navbar-breadcrumbs,
.page-breadcrumbs {
  display: none !important;
}

/* Frappe's stock login card sits inside .page-card — kill its
   default chrome; we're recomposing the whole thing. */
.page-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.page-card-head {
  border: 0 !important;
  padding: 0 0 1.5rem 0 !important;
  background: transparent !important;
}
.page-card-head h4 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: #0a0a0b;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── The two-panel shell ── */
.imanage-brand-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  min-width: 380px;
  background: #0a0a0b;
  color: #fdfdfd;
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  z-index: 1;
}

/* Ambient orange glow on the brand panel — subtle, adds warmth to
   the obsidian without breaking readability. */
.imanage-brand-panel::before,
.imanage-brand-panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}
.imanage-brand-panel::before {
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: rgba(255, 77, 0, 0.18);
}
.imanage-brand-panel::after {
  bottom: -120px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: rgba(255, 77, 0, 0.10);
}

.imanage-form-panel {
  margin-left: 40%;
  min-height: 100vh;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  z-index: 2;
}
.imanage-form-wrap {
  width: 100%;
  max-width: 420px;
}

/* ── Brand panel content ── */
.imanage-brand-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.imanage-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ff4d00;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.imanage-wordmark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: #fdfdfd;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.imanage-wordmark sup {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #ff4d00;
  background: rgba(255, 77, 0, 0.14);
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  position: relative;
  top: -6px;
}

.imanage-brand-hero {
  max-width: 34rem;
}
.imanage-brand-eyebrow {
  display: inline-block;
  color: #ff4d00;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 77, 0, 0.14);
  border: 1px solid rgba(255, 77, 0, 0.25);
  margin-bottom: 1.5rem;
}
.imanage-brand-hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fdfdfd;
  margin: 0 0 1rem 0;
}
.imanage-brand-hero p {
  color: rgba(253, 253, 253, 0.68);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 2rem 0;
  max-width: 28rem;
}

.imanage-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.imanage-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: rgba(253, 253, 253, 0.85);
}
.imanage-features svg {
  width: 22px;
  height: 22px;
  color: #ff4d00;
  flex-shrink: 0;
  margin-top: 2px;
}
.imanage-features strong {
  display: block;
  color: #fdfdfd;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.imanage-features span {
  color: rgba(253, 253, 253, 0.6);
  font-size: 0.85rem;
  line-height: 1.5;
}

.imanage-brand-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 253, 253, 0.08);
  color: rgba(253, 253, 253, 0.5);
  font-size: 0.8rem;
}
.imanage-brand-footer a {
  color: rgba(253, 253, 253, 0.7);
  text-decoration: none;
  margin-left: 1rem;
  transition: color 200ms;
}
.imanage-brand-footer a:hover {
  color: #ff4d00;
}

/* ── Form panel content ── */
.imanage-form-wrap .sign-in-content h4,
.imanage-form-wrap h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: #0a0a0b;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem 0;
}
.imanage-form-wrap .login-content p,
.imanage-form-wrap p {
  color: #52525b;
  font-size: 0.95rem;
  margin: 0 0 2rem 0;
}

/* Frappe form fields */
.imanage-form-wrap .form-group,
.imanage-form-wrap .form-signup {
  margin-bottom: 1rem;
}
.imanage-form-wrap label,
.imanage-form-wrap .control-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.imanage-form-wrap input[type="text"],
.imanage-form-wrap input[type="email"],
.imanage-form-wrap input[type="password"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
  color: #0a0a0b;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.95rem;
  transition: border-color 200ms, box-shadow 200ms;
  box-sizing: border-box;
}
.imanage-form-wrap input[type="text"]:focus,
.imanage-form-wrap input[type="email"]:focus,
.imanage-form-wrap input[type="password"]:focus {
  outline: none;
  border-color: #ff4d00;
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.15);
}

/* Password field wrapper (Frappe wraps password inputs) */
.imanage-form-wrap .field-icon-wrap {
  position: relative;
}
.imanage-form-wrap .toggle-password {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  transition: color 200ms;
}
.imanage-form-wrap .toggle-password:hover { color: #0a0a0b; }

/* Frappe forgot-password link */
.imanage-form-wrap .forgot-password-link,
.imanage-form-wrap .forgot-password {
  color: #ff4d00 !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 200ms;
  display: inline-block;
  margin-top: 0.25rem;
}
.imanage-form-wrap .forgot-password-link:hover,
.imanage-form-wrap .forgot-password:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* Primary CTA (login button) */
.imanage-form-wrap .btn-login,
.imanage-form-wrap .btn-sign-in,
.imanage-form-wrap button[type="submit"],
.imanage-form-wrap .btn-primary {
  width: 100%;
  background: #ff4d00 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 999px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms !important;
  margin-top: 0.5rem;
}
.imanage-form-wrap .btn-login:hover,
.imanage-form-wrap .btn-sign-in:hover,
.imanage-form-wrap button[type="submit"]:hover,
.imanage-form-wrap .btn-primary:hover {
  background: #e64500 !important;
  box-shadow: 0 8px 22px rgba(255, 77, 0, 0.25);
}
.imanage-form-wrap .btn-login:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Secondary login options divider (OR + login-with-email-link) */
.imanage-form-wrap .or,
.imanage-form-wrap .or-separator {
  text-align: center;
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.imanage-form-wrap .or::before,
.imanage-form-wrap .or::after,
.imanage-form-wrap .or-separator::before,
.imanage-form-wrap .or-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e4e4e7;
}

.imanage-form-wrap .btn-email-login,
.imanage-form-wrap .btn-secondary {
  width: 100%;
  background: #fff !important;
  color: #0a0a0b !important;
  border: 1px solid #e4e4e7 !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 999px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  cursor: pointer;
  transition: border-color 200ms;
}
.imanage-form-wrap .btn-email-login:hover,
.imanage-form-wrap .btn-secondary:hover {
  border-color: #a1a1aa !important;
}

/* "New to imanageyourpractice?" / signup message */
.imanage-form-wrap .sign-up-message,
.imanage-form-wrap .login-message {
  text-align: center;
  color: #52525b;
  font-size: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f4f4f5;
}
.imanage-form-wrap .sign-up-message a,
.imanage-form-wrap .login-message a {
  color: #ff4d00 !important;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.35rem;
}
.imanage-form-wrap .sign-up-message a:hover {
  text-decoration: underline;
}

/* Error / alert messages */
.imanage-form-wrap .alert,
.imanage-form-wrap .alert-message,
.imanage-form-wrap .error-message {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Mini footer under the form */
.imanage-footer-mini {
  text-align: center;
  color: #a1a1aa;
  font-size: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f4f4f5;
}
.imanage-footer-mini a {
  color: #52525b;
  margin-left: 0.75rem;
  text-decoration: none;
  transition: color 200ms;
}
.imanage-footer-mini a:hover {
  color: #ff4d00;
}

/* ── Mobile (<960px): stack, brand becomes a compact top band ── */
@media (max-width: 960px) {
  .imanage-brand-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 2rem 1.75rem;
    min-height: auto;
  }
  .imanage-brand-hero {
    padding: 1rem 0;
  }
  .imanage-brand-hero h1 {
    font-size: 1.75rem;
  }
  .imanage-brand-hero p {
    font-size: 0.9rem;
  }
  /* Hide the feature list on narrow screens to keep the fold height reasonable */
  .imanage-features {
    display: none;
  }
  .imanage-brand-footer {
    display: none;
  }
  .imanage-form-panel {
    margin-left: 0;
    padding: 2rem 1.5rem;
    min-height: auto;
  }
}