/* Opus EHR login, from the Opus design system (kit.css .opus-login). */
:root {
  --indigo-700: #363BBB;
  --indigo-900: #2A2E95;
  --fg-1: #646A7A;
  --fg-2: #9FA3B0;
  --border: #D4D6DA;
  --error-bg: #FEF3F2;
  --error-fg: #B42318;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Roboto', sans-serif; color: var(--fg-1); background: #fff; }

.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 20px; gap: 20px; }

.login-left {
  position: relative; overflow: hidden; border-radius: 20px; color: #fff; padding: 60px;
  background-color: var(--indigo-700);
  background-image: radial-gradient(rgba(255, 255, 255, .13) 4px, transparent 4.5px);
  background-size: 80px 80px; background-position: 20px 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand { width: 260px; height: auto; }
.login-tag { text-align: center; }
.login-tag h2 { font-family: 'Poppins', 'Roboto', sans-serif; font-weight: 500; font-size: 32px; margin: 0 0 10px; }
.login-cr { font-family: 'Poppins', 'Roboto', sans-serif; font-weight: 500; font-size: 16px; margin: 24px 0 0; opacity: .85; }

.login-right { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.login-right h1 { color: var(--indigo-700); font-size: 38px; font-weight: 700; margin: 0 0 40px; }
.login-right form { width: 450px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 700; color: var(--fg-1); }
.field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px;
  font: inherit; font-size: 14px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg-1); background: #fff;
}
.field input::placeholder { color: var(--fg-2); }
.field input:focus { outline: none; border-color: var(--indigo-700); box-shadow: 0 0 0 3px rgba(54, 58, 187, .12); }

.btn-primary {
  display: flex; justify-content: center; align-items: center; width: 100%; padding: 10px 14px;
  border: 0; border-radius: 5px; background: var(--indigo-700); color: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}
.btn-primary:hover { background: var(--indigo-900); }
.btn-primary:disabled { opacity: .7; cursor: default; }

.login-error {
  margin: 0; padding: 10px 12px; border-radius: 5px; font-size: 14px;
  background: var(--error-bg); color: var(--error-fg);
}

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; padding: 16px; }
  .login-left { display: none; }
  .login-right h1 { font-size: 32px; margin-bottom: 30px; }
}