/*
 * Clian Holding — login skin (Kognato v1)
 * ---------------------------------------
 * Source material: logo only (no website palette supplied). Palette derived
 * from the logo wordmark (deep charcoal) plus a warm-tan secondary sampled
 * from the brown accent shape on top of the mark.
 *
 * Palette substitutions vs. the v1 default (Flanks blue #3972FF):
 *   --principal-650  #2850b3 -> #000000   (near-black hover/active)
 *   --principal-500  #3972ff -> #1A1A1A   (deep charcoal — primary)
 *   --principal-450  #4c80ff -> #333333
 *   --principal-300  #88aaff -> #6B6B6B
 *   --principal-150  #c3d4ff -> #DDDDDD
 *   --secondary-500  #aea693 -> #8B6F47   (warm tan accent)
 *   --acents-1-500   #b7b09c -> #A89074
 *
 * Logo assets (replaced):
 *   /Custom/Content/logo_login.png     -> Clian wordmark + brown mark
 *   /Custom/Content/logo_menu.png      -> Clian wordmark + brown mark
 *   /Custom/Content/logo_dashboard.png -> Clian wordmark + brown mark
 *
 * Layout micro-tweak: `form.form-horizontal` now uses explicit
 *   background-size: 150px auto;
 *   background-position: top center;
 *   padding-top: 170px;
 * (was: background-size: contain only) because the Clian mark is near-square
 * and would otherwise be scaled by `contain` to overlap the form inputs.
 */

:root {
  --principal-650: #000000;
  --principal-500: #1A1A1A;
  --principal-450: #333333;
  --principal-300: #6B6B6B;
  --principal-150: #DDDDDD;
  --secondary-500: #8B6F47;
  --acents-1-500: #A89074;
  --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;
}

/* Clian mark is near-square (~1.15:1). `background-size: contain` (the
   default in other clients) would scale the logo to overlap the inputs,
   so we render at an explicit 150px wide, anchor top-center, and reserve
   exactly enough padding-top (logo height ~135px + 25px breathing room). */
form.form-horizontal {
  background-image: url('/Custom/Content/logo_login.png');
  background-size: 150px auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 160px;
}

img.logo {
  /* Use display:none here (not visibility:hidden) so the original logo img
     stops reserving space. The background-image + padding-top below replaces it. */
  display: none;
}

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;
  }
}