/*
 * The login page in our look (Visual Design §9.2).
 *
 * Frappe draws /login on the server (crm/www/login.html extends Frappe's page), so
 * the page can't load the app's theme.css or brand.js. This file is the page's own
 * small copy of what it needs:
 *   - The --re-* values below mirror frontend/src/realestate/ui/theme.css. A test
 *     (frontend/src/realestate/ui/loginPage.test.js) keeps them in step, in light and in dark.
 *   - Manrope is our own copy of the app's font file (public/fonts/manrope).
 *   - The rest restyles Frappe's login markup with those tokens only.
 *
 * Guests have no saved Light or Dark choice, so the page follows the device only.
 * This stylesheet loads after Frappe's own (login.bundle.css), so it wins on equal
 * specificity.
 */

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/crm/fonts/manrope/manrope-latin-wght-normal.woff2')
    format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Our tokens (the same values as theme.css) */
  --re-brand-500: #6870f4;
  --re-brand-600: #4c55f0;
  --re-brand-700: #3d43cf;
  --re-brand-800: #3236a6;
  --re-on-brand: #ffffff;
  --re-brand-hover: var(--re-brand-700);
  --re-brand-press: var(--re-brand-800);

  --re-ground: #f2f3f7;
  --re-surface: #ffffff;
  --re-surface-sunk: #f6f7fa;
  --re-hover: #f1f2f7;
  --re-line: #e6e8ef;
  --re-ink: #16171d;
  --re-ink-2: #4e5162;
  --re-ink-3: #6a6d7e;

  --re-good: #12754f;
  --re-good-soft: #dcf5e8;
  --re-bad: #b42a25;
  --re-bad-soft: #fde4e2;

  --re-radius-card: 16px;
  --re-radius-control: 10px;
  --re-shadow-card: 0 1px 2px rgb(22 23 29 / 0.04),
    0 1px 1px rgb(22 23 29 / 0.02);
  --re-font: 'Manrope Variable', system-ui, sans-serif;

  /* Frappe's own variables, pointed at ours, so its utility classes
     (text-ink-gray-6 and the like), its alerts and its buttons follow the
     theme in light and in dark */
  --bg-color: var(--re-ground);
  --fg-color: var(--re-surface);
  --card-bg: var(--re-surface);
  --control-bg: var(--re-surface-sunk);
  --text-color: var(--re-ink);
  --text-muted: var(--re-ink-2);
  --text-light: var(--re-ink-3);
  --border-color: var(--re-line);
  --font-stack: var(--re-font);

  --surface-base: var(--re-surface);
  --surface-gray-1: var(--re-surface-sunk);
  --surface-gray-2: var(--re-surface-sunk);
  --surface-gray-3: var(--re-hover);
  --outline-gray-1: var(--re-line);
  --outline-gray-2: var(--re-line);
  --outline-gray-3: var(--re-line);

  --ink-gray-9: var(--re-ink);
  --ink-gray-8: var(--re-ink);
  --ink-gray-7: var(--re-ink-2);
  --ink-gray-6: var(--re-ink-2);
  --ink-gray-5: var(--re-ink-3);
  --ink-gray-4: var(--re-ink-3);

  --surface-red-2: var(--re-bad-soft);
  --ink-red-6: var(--re-bad);
  --ink-red-8: var(--re-bad);
  --surface-green-2: var(--re-good-soft);
  --ink-green-6: var(--re-good);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --re-brand-500: #7880ff;
    --re-brand-600: #5b63f5;
    --re-brand-700: #8c92ff;
    --re-on-brand: #ffffff;
    --re-brand-hover: #4c55f0;
    --re-brand-press: #3d43cf;

    --re-ground: #0e0f13;
    --re-surface: #17181e;
    --re-surface-sunk: #121318;
    --re-hover: #1f2028;
    --re-line: #272832;
    --re-ink: #f1f1f5;
    --re-ink-2: #b7b8c6;
    --re-ink-3: #8f91a1;

    --re-good: #4fd197;
    --re-good-soft: #123527;
    --re-bad: #ff7d75;
    --re-bad-soft: #3d1715;

    --re-shadow-card: 0 0 0 1px rgb(255 255 255 / 0.04);
  }
}

/* ---- The page ---- */

body {
  background-color: var(--re-ground);
  color: var(--re-ink);
  font-family: var(--re-font);
  -webkit-font-smoothing: antialiased;
}

body .page-content-wrapper {
  padding-top: 56px;
  padding-bottom: 40px;
}

/* Our mark and name above the card (Visual Design §2, §9.2) */
.re-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  color: var(--re-ink);
}
.re-login-brand__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
}
.re-login-brand__name {
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -0.015em;
}

/* ---- The card: one white card on the ground ---- */

.login-content.page-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 32px;
  border: 0;
  border-radius: var(--re-radius-card);
  background-color: var(--re-surface);
  box-shadow: var(--re-shadow-card);
}

/* Our mark above replaces Frappe's logo inside the card */
.page-card-head img.app-logo {
  display: none;
}

.page-card-head h4 {
  color: var(--re-ink);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-card-subtitle {
  color: var(--re-ink-2);
}

.page-card label {
  color: var(--re-ink-2);
  font-size: 13.5px;
  font-weight: 560;
}

/* ---- Fields: 44 px tall, 16 px text (a phone zooms into anything smaller) ---- */

.login-content.page-card
  .page-card-body
  input:is([type='text'], [type='email'], [type='password']) {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--re-line);
  border-radius: var(--re-radius-control);
  background-color: var(--re-surface-sunk);
  color: var(--re-ink);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0;
}
.login-content.page-card .page-card-body .password-field input {
  padding-right: 44px;
}
.login-content.page-card
  .page-card-body
  input:is([type='text'], [type='email'], [type='password']):focus {
  border-color: var(--re-brand-500);
  outline: 2px solid var(--re-brand-500);
  outline-offset: -1px;
  box-shadow: none;
}
.login-content.page-card .page-card-body ::placeholder {
  color: var(--re-ink-3);
}
.login-content.page-card
  .page-card-body
  .form-group.invalid
  input:is([type='text'], [type='email'], [type='password']) {
  border-color: var(--re-bad);
}

/* ---- Buttons ---- */

/* Drawn here in full rather than through the variables Frappe's own button
   rules read, so the buttons keep our look even where Frappe's stylesheet
   is built differently or not at all */
.page-card .es-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--re-line);
  border-radius: var(--re-radius-control);
  background: var(--re-surface);
  color: var(--re-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}
/* The other ways in (email link, password, social) are quiet next to the main button */
.page-card .es-button:hover {
  background: var(--re-surface-sunk);
}
/* The main button: indigo with white text (§6) */
.page-card .es-button[data-variant='solid'] {
  border-color: transparent;
  background: var(--re-brand-600);
  color: var(--re-on-brand);
}
.page-card .es-button[data-variant='solid']:hover {
  background: var(--re-brand-hover);
}
.page-card .es-button[data-variant='solid']:active {
  background: var(--re-brand-press);
}
.page-card .es-button:focus-visible {
  outline: 2px solid var(--re-brand-500);
  outline-offset: 2px;
}
/* A disabled button keeps its colours and fades (Frappe's grey would sit
   under 4.5:1 on the card) */
.page-card .es-button:disabled {
  cursor: default;
  opacity: 0.55;
}
.page-card .es-button[data-variant='solid']:disabled {
  background: var(--re-brand-600);
}

@media (prefers-reduced-motion: reduce) {
  .page-card .es-button {
    transition: none;
  }
}

/* ---- Links ---- */

.page-card a:not(.es-button) {
  color: var(--re-brand-700);
  font-weight: 600;
}
.page-card a:not(.es-button):hover {
  text-decoration: underline;
}
.page-card .sign-up-message {
  color: var(--re-ink-2);
}
/* The one !important: Frappe's own .text-muted is one (a grey that is 4.2:1 on
   the card, under AA), and only another one beats it */
.page-card .text-muted {
  color: var(--re-ink-2) !important;
}

/* ---- On a phone the card stays a card, with the ground showing round it ---- */

@media (max-width: 575.98px) {
  body .page-content-wrapper {
    padding-top: 40px;
    min-height: 0;
  }
  .login-content.page-card {
    max-width: 100%;
    min-height: 0;
    padding: 24px;
    border-radius: var(--re-radius-card);
  }
}