/*
 * ============================================================
 * PF Multi Family Office — Login Page Styles
 * Adapted from Pivolt/Flanks template
 * ============================================================
 *
 * COLOR MAPPING (Template → PF Multi Family Office):
 * --------------------------------------------------
 * --principal-650: #2850b3  → #033564  (dark navy)
 * --principal-500: #3972ff  → #044786  (main principal blue)
 * --principal-450: #4c80ff  → #0A5A9E  (medium principal blue)
 * --principal-300: #88aaff  → #577BB7  (soft blue, chart color-first)
 * --principal-150: #c3d4ff  → #E6EDF3  (very light blue, principal-50)
 * --secondary-500: #aea693  → #B7925A  (gold secondary)
 * --acents-1-500: #b7b09c  → #94744C  (warm brown accent)
 *
 * IMAGE PATH MAPPING:
 * --------------------------------------------------
 * /Custom/Content/logo_login.png → /custom/images/tenant_logo.png
 *
 * FONT:
 * --------------------------------------------------
 * EB Garamond (regular / Bold)
 *
 * NOTE: Replace images/tenant_logo.png with production logo file.
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');

:root {
  --principal-650: #033564;
  --principal-500: #044786;
  --principal-450: #0A5A9E;
  --principal-300: #577BB7;
  --principal-150: #E6EDF3;
  --secondary-500: #B7925A;
  --acents-1-500: #94744C;
  --neutral-950: #0e0e0e;
  --neutral-750: #464646;
  --neutral-600: #707070;
  --neutral-500: #8c8c8c;
  --neutral-250: #c6c6c6;
  --neutral-100: #e8e8e8;
  --neutral-50: #f3f3f3;
  --neutral-25: #f9f9f9;
  --neutral-0: #ffffff;
  --success-500: #5cb37f;
  --success-150: #cee8d8;
  --warning-500: #e8a359;
  --warning-150: #f8e3cd;
  --error-500: #d8544d;
  --error-150: #f3cbc9;
}

body {
  background-color: var(--neutral-50) !important;
  color: var(--neutral-950) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'EB Garamond', serif;
}

form.form-horizontal {
  background-image: url('/custom/images/tenant_logo.png');
  background-size: 260px auto;
  background-repeat: no-repeat;
  background-position: center top;
}

img.logo {
  visibility: hidden;
}

img {
  margin-bottom: 24px;
}

a {
  color: var(--neutral-950);
}

a:hover {
  text-decoration: underline !important;
  color: var(--neutral-950) !important;
}

label {
  color: var(--neutral-950);
}

#loginForm {
  background-color: white;
  margin: 120px auto;
  padding: 40px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  width: 450px;
}

.form-control {
  border: none;
  box-shadow: none;
  border: 1px solid var(--neutral-250);
  border-radius: 4px;
}

#submit-btn {
  background-color: var(--principal-500);
  color: white;
  border: none;
}

#RememberMe {
  accent-color: var(--principal-500);
}

@media (max-width: 680px) {
  #loginForm {
    min-width: 85vw;
    padding: 24px;
  }
}