/*
 * ERA ERP — Login Page Colors
 * Colors only, no layout changes.
 */

/* Light login */
body[data-page="login"] {
  background-color: #1B3564 !important;
}

body[data-page="login"] .page-card {
  background-color: #fff !important;
}

body[data-page="login"] .page-card .page-card-head .title {
  color: #1A2640 !important;
}

body[data-page="login"] .form-control {
  border-color: #DDE4EF !important;
  background-color: #fff !important;
  color: #1A2640 !important;
}

body[data-page="login"] .form-control:focus {
  border-color: #2f5496 !important;
}

body[data-page="login"] .for-login .btn-primary,
body[data-page="login"] .for-signup .btn-primary {
  background-color: #2f5496 !important;
  border-color: #2f5496 !important;
}

body[data-page="login"] .for-login .btn-primary:hover,
body[data-page="login"] .for-signup .btn-primary:hover {
  background-color: #3A6ABF !important;
  border-color: #3A6ABF !important;
}

body[data-page="login"] .btn-default {
  border-color: #DDE4EF !important;
}

body[data-page="login"] .btn-default:hover {
  border-color: #B8C6DA !important;
  background-color: #F7F9FC !important;
}

body[data-page="login"] .page-card-body a {
  color: #2f5496 !important;
}

body[data-page="login"] .page-card-body a:hover {
  color: #3A6ABF !important;
}


/* Dark login */
[data-theme="dark"] body[data-page="login"],
body[data-page="login"][data-theme="dark"] {
  background-color: #070D1A !important;
}

[data-theme="dark"] body[data-page="login"] .page-card,
body[data-page="login"][data-theme="dark"] .page-card {
  background-color: #111827 !important;
  border-color: #1E2D42 !important;
}

[data-theme="dark"] body[data-page="login"] .page-card .page-card-head .title,
body[data-page="login"][data-theme="dark"] .page-card .page-card-head .title {
  color: #E4E9F1 !important;
}

[data-theme="dark"] body[data-page="login"] .form-control,
body[data-page="login"][data-theme="dark"] .form-control {
  background-color: #141D2E !important;
  border-color: #1E2D42 !important;
  color: #E4E9F1 !important;
}

[data-theme="dark"] body[data-page="login"] .form-control:focus,
body[data-page="login"][data-theme="dark"] .form-control:focus {
  border-color: #4A7FD4 !important;
}

[data-theme="dark"] body[data-page="login"] .for-login .btn-primary,
[data-theme="dark"] body[data-page="login"] .for-signup .btn-primary,
body[data-page="login"][data-theme="dark"] .for-login .btn-primary,
body[data-page="login"][data-theme="dark"] .for-signup .btn-primary {
  background-color: #4A7FD4 !important;
  border-color: #4A7FD4 !important;
}

[data-theme="dark"] body[data-page="login"] .for-login .btn-primary:hover,
[data-theme="dark"] body[data-page="login"] .for-signup .btn-primary:hover,
body[data-page="login"][data-theme="dark"] .for-login .btn-primary:hover,
body[data-page="login"][data-theme="dark"] .for-signup .btn-primary:hover {
  background-color: #6A9AE8 !important;
  border-color: #6A9AE8 !important;
}

[data-theme="dark"] body[data-page="login"] .page-card-body a,
body[data-page="login"][data-theme="dark"] .page-card-body a {
  color: #4A7FD4 !important;
}

[data-theme="dark"] body[data-page="login"] .btn-default,
body[data-page="login"][data-theme="dark"] .btn-default {
  background-color: #141D2E !important;
  border-color: #1E2D42 !important;
  color: #B0BFD4 !important;
}


/* Auto mode dark */
@media (prefers-color-scheme: dark) {
  [data-theme-mode="automatic"] body[data-page="login"],
  body[data-page="login"][data-theme-mode="automatic"] {
    background-color: #070D1A !important;
  }

  [data-theme-mode="automatic"] body[data-page="login"] .page-card,
  body[data-page="login"][data-theme-mode="automatic"] .page-card {
    background-color: #111827 !important;
    border-color: #1E2D42 !important;
  }

  [data-theme-mode="automatic"] body[data-page="login"] .for-login .btn-primary,
  [data-theme-mode="automatic"] body[data-page="login"] .for-signup .btn-primary,
  body[data-page="login"][data-theme-mode="automatic"] .for-login .btn-primary,
  body[data-page="login"][data-theme-mode="automatic"] .for-signup .btn-primary {
    background-color: #4A7FD4 !important;
    border-color: #4A7FD4 !important;
  }
}