/* Copesetics Backend — Sign-In Styles */

:root {
  --background: #ffffff;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
}

.window-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  pointer-events: none;
}

.window-title {
  color: #17243c;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign-in screen */

.page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* Raise the entire sign-in layout to replace the removed logo space. */
  transform: translateY(-46px);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 57px;
}


.brand-name {
  margin: 0;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.2;
  white-space: nowrap;
}

.login-card {
  width: 100%;
  max-width: 367.5px;
  margin: 0 auto;
  transform: translateY(10px);
  padding: 30px 27px 25px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 19px;
  box-shadow:
    0 15px 45px rgba(27, 39, 70, 0.055),
    0 2px 8px rgba(27, 39, 70, 0.025);
}

.login-intro {
  font-weight: 600;
  margin: 0 0 26px;
  text-align: left;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 19px;
}

.form-group label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 550;
  color: #33415b;
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: #8994a8;
  pointer-events: none;
}

.input-wrap input {
  display: block;
  width: 100%;
  height: 49px;
  padding: 0 15px 0 46px;
  border: 1px solid #d9e0eb;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.input-wrap input::placeholder {
  color: #9aa5b6;
}

.input-wrap input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(113, 83, 184, 0.12);
}

.sign-in-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 49px;
  margin-top: 25px;
  border: none;
  border-radius: 10px;
  background: var(--gradient);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.sign-in-button:hover {
  opacity: 0.94;
  box-shadow: 0 6px 18px rgba(178, 74, 157, 0.19);
}

.sign-in-button:active {
  transform: translateY(1px);
}

.sign-in-button:focus-visible {
  outline: 3px solid #c3b2e8;
  outline-offset: 3px;
}

.sign-in-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.sign-in-button svg {
  width: 18px;
  height: 18px;
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.security-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--purple);
}

.security-note p {
  margin: 0;
  color: #7b8799;
  font-size: 12px;
  line-height: 1.6;
}


/* Error pop-up */

.login-error-dialog {
  width: min(380px, calc(100% - 36px));
  max-width: 380px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 20px 65px rgba(23, 36, 60, 0.18);
  text-align: center;
}

.login-error-dialog::backdrop {
  background: rgba(18, 27, 48, 0.42);
}

.login-error-dialog h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.5px;
}

.login-error-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}

.login-error-close {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 24px;
  border: none;
  border-radius: 10px;
  background: var(--gradient);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.login-error-close:hover {
  opacity: 0.94;
}

.login-error-close:focus-visible {
  outline: 3px solid #c3b2e8;
  outline-offset: 3px;
}

/* Responsive layout */

@media (max-height: 720px) {
  body {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand {
    margin-bottom: 39px;
  }

  .page {
    transform: translateY(-13px);
  }


  .login-card {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .login-intro {
    margin-bottom: 18px;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .sign-in-button {
    margin-top: 17px;
  }

  .security-note {
    margin-top: 17px;
    padding-top: 15px;
  }

  .footer {
    margin-top: 34px;
  }
}

@media (max-width: 540px) {
  body {
    padding-left: 17px;
    padding-right: 17px;
  }

  .brand-name {
    font-size: 25px;
  }

  .login-card {
    padding-left: 23px;
    padding-right: 23px;
  }

  .login-error-dialog {
    padding: 25px 22px;
  }
}


/* Accessible show/hide control for password fields. */
.password-visibility-wrap { position:relative; display:block; width:100%; }
.password-visibility-wrap input { padding-right:48px !important; }
.password-visibility-toggle { position:absolute; top:50%; right:9px; transform:translateY(-50%); z-index:2; border:0; background:transparent; color:#7153b8; font:inherit; font-size:12px; font-weight:600; padding:8px; cursor:pointer; border-radius:5px; }
.password-visibility-toggle:focus-visible { outline:2px solid #7153b8; outline-offset:1px; }

.password-visibility-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:5px; }
.password-visibility-toggle svg { display:block; width:20px; height:20px; }

.security-note-second-line { display:block; margin-top:3px; }

/* Keep the welcome heading on one line while retaining a compact sign-in form. */
@media (max-width: 690px) {
  .brand-name { font-size: clamp(14px, 4vw, 25px); letter-spacing: -0.6px; }
}

/* Keep field icons visible above password visibility input wrappers. */
.input-wrap > .input-icon {
  z-index: 3;
}

/* Move the complete sign-in composition up by 10px. */
.page { translate: 0 -10px; }