/*
 * Editorial theming for Frappe's own hosted website pages, most
 * importantly /login (and its #forgot / #signup / #login-with-email-link
 * panels, and the OTP step injected by templates/includes/login/login.js —
 * all of them reuse the same .page-card / .form-control / .btn-login
 * markup, so styling those classes covers every branch of the flow
 * automatically). Loaded via hooks.py `web_include_css`.
 *
 * This file is CSS only. It does not touch frappe/www/login.html or any
 * other core template, and it does not add or change any <script> - the
 * login form still POSTs through Frappe's own JS
 * (templates/includes/login/login.js), so two-factor verification,
 * "Forgot Password?" and account-lockout messaging all keep working
 * exactly as Frappe implements them. Restyling only.
 *
 * Same design tokens as the sales-app SPA (sales-app/src/index.css,
 * terracotta/default palette) and the static /mockup - EB Garamond for
 * display type, Manrope for body, warm off-white background, terracotta
 * accent. Editorial, not SaaS.
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* !important on the background: Frappe's own website theme CSS sets a
 * `body { background: #f3f3f3 }` rule of equal specificity that loads
 * after this stylesheet, so an un-flagged declaration here loses the
 * cascade and the grey shows through everywhere body isn't covered by a
 * more specific child (confirmed live: computed body background stayed
 * #f3f3f3 while html/.page-content-wrapper correctly picked up #F6F3ED). */
html, body {
  background: #F6F3ED !important;
  color: #1A1A1A;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}

/* The website chrome renders a bootstrap navbar above the login card
 * (id="navbar", classes vary by version but always include .navbar) even
 * though this app has no public website pages to navigate to - it shows up
 * as a flat white strip with a hard shadow line across the very top of an
 * otherwise editorial page. Blend it into the page background rather than
 * hiding it outright, since Frappe's own JS (login.js / navbar.js) toggles
 * its visibility/contents and `display: none` could fight that. */
.navbar,
#navbar {
  background: #F6F3ED !important;
  border-bottom: 1px solid #DED6C5 !important;
  box-shadow: none !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  color: #1A1A1A !important;
}

/* Vertical centering wrapper Frappe renders the card into. */
.page-content-wrapper,
.page-card-container {
  background: #F6F3ED;
}

/* Logo + heading above the login card ("Login to Polly King"). */
.page-card-head {
  text-align: center;
}

.page-card-head .app-logo {
  max-height: 44px;
  width: auto;
  margin-bottom: 12px;
}

.page-card-head h4 {
  font-family: 'EB Garamond', serif;
  font-weight: 500;
  font-size: 22px;
  color: #1A1A1A;
}

/* The card itself (shared by login, forgot-password, sign-up). Warm
 * off-white rather than stark white, with the project's border token and a
 * softer, more diffuse shadow - reads as editorial paper stock rather than
 * a SaaS modal. */
.page-card,
.login-content.page-card {
  background: #FBF9F4;
  border: 1px solid #DED6C5;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(26, 26, 26, 0.07);
  padding: 8px;
}

.page-card .page-card-body,
.page-card .form-group {
  background: transparent;
}

.page-card label,
.page-card .control-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #6B665C;
  text-transform: uppercase;
}

/* Inputs (plain <input class="form-control"> on older templates, or the
 * frappe.ui.form control wrapper - input-with-feedback - on newer ones):
 * both selectors point at the same visual element so either markup gets
 * the editorial treatment instead of the stock Bootstrap grey fill. */
.page-card .form-control,
.page-card input.input-with-feedback {
  border: 1px solid #DED6C5;
  border-radius: 6px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-family: 'Manrope', sans-serif;
  box-shadow: none;
}

.page-card .form-control:focus,
.page-card input.input-with-feedback:focus {
  border-color: #8B3A2F;
  box-shadow: 0 0 0 2px rgba(139, 58, 47, 0.15);
  outline: none;
}

.page-card .form-control::placeholder {
  color: #A39D8F;
}

/* Primary action - login, and the OTP "Verify" step reuses .btn-login too. */
.page-card .btn-login,
.page-card .btn-primary {
  background: #8B3A2F;
  border-color: #8B3A2F;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
}

.page-card .btn-login:hover,
.page-card .btn-primary:hover {
  background: #6F2E25;
  border-color: #6F2E25;
}

/* Secondary links: "Forgot Password?", "Login with Email Link", sign-up.
 * Untouched functionally - Frappe's login.js still owns the click
 * behaviour - only the colour/weight is restyled. */
.page-card a,
.forgot-password-message a,
.sign-up-message a,
.login-content .for-forgot a,
.login-content .for-email-login a {
  color: #8B3A2F;
  font-weight: 500;
}

.page-card .toggle-password {
  color: #8A8680;
}

.web-footer {
  background: #F6F3ED;
  color: #6B665C;
}