/* Shared user authentication additions, using the administrator login theme. */
.admin-login-page {
  padding: clamp(16px, 3vw, 40px);
}

.admin-login-page .login-root {
  min-height: min(760px, calc(100vh - 48px));
  max-width: 1180px;
}

.admin-login-page .right-card {
  padding: clamp(28px, 4vw, 56px);
}

.admin-login-page .card:not(.register-card) {
  width: min(440px, 100%);
  padding: 38px 40px 30px;
}

.admin-login-page .card-header { margin-bottom: 18px; }
.admin-login-page .sg-logo-top { width: 76px; height: 76px; margin-bottom: 2px; }
.admin-login-page .card-title h1 { font-size: clamp(30px, 3vw, 38px); }
.admin-login-page .field { margin-top: 17px; }
.admin-login-page .form-actions { margin-top: 26px; }
.admin-login-page .input-icon .icon svg,
.admin-login-page .password-wrap .icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-login-page .eye-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-switch {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5edf7;
  color: var(--muted, #64748b);
  font-size: 14px;
  text-align: center;
}

.auth-switch a,
.back-link {
  color: var(--blue, #0a66c2);
  font-weight: 700;
  text-decoration: none;
}

.auth-switch a:hover,
.back-link:hover { color: var(--accent-strong, #f56d00); }

.register-card .login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #0a66c2;
  border-radius: 9px;
  background: #fff;
  color: #0a66c2;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.register-card .login-button:hover {
  background: #0a66c2;
  color: #fff;
  transform: translateY(-1px);
}

.back-link {
  display: block;
  margin-top: 18px;
  text-align: center;
}

.form-success {
  margin: 18px 0 12px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #ecfdf5;
  color: #166534;
  font-size: 14px;
}

.register-card-wrap {
  align-items: flex-start;
  overflow-y: auto;
  padding: 20px;
}

.register-card {
  width: min(100%, 540px);
  margin: auto;
  padding: 16px 24px 14px;
}

.register-card .card-header { margin-bottom: 7px; }
.register-card .sg-logo-top { width: 54px; height: 54px; margin-bottom: 0; }
.register-card .card-title h1 { font-size: clamp(25px, 2.2vw, 31px); }
.register-card .muted { margin-top: 5px; font-size: 14px; }
.register-card .field { margin-top: 9px; }
.register-card .field input,
.register-card .password-wrap input {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 11px;
  font-size: 14px;
}
.register-card .field input { padding-right: 42px; }
.register-card .email-field { display: block; }
.register-card .email-input-wrapper { width: 100%; }
.register-card .email-input-wrapper .email-icon { left: 10px; top: 50%; }
.register-card .email-input-wrapper input { width: 100%; }
.register-card .availability-indicator {
  display: block;
  width: fit-content;
  min-width: 20px;
  min-height: 20px;
  padding: 0 6px;
  margin-top: 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}
.register-card .email-field .availability-indicator { min-height: 20px; }
.register-card .availability-indicator.available { background: #16834b; }
.register-card .availability-indicator.unavailable,
.register-card .availability-indicator.error { background: #b42318; }
.register-card .availability-indicator.unavailable { font-size: 10px; white-space: nowrap; }
.register-card .availability-indicator.checking { border: 2px solid #0a66c2; border-top-color: transparent; animation: availability-spin .7s linear infinite; }
@keyframes availability-spin { to { transform: rotate(360deg); } }
.register-card .field input { padding-left: 48px; }
.register-card .password-wrap input { padding-left: 48px; padding-right: 48px; }
.register-card .input-icon .icon,
.register-card .password-wrap .icon { left: 10px; width: 28px; height: 28px; }
.register-card .eye-toggle { right: 6px; width: 36px; height: 36px; }
.register-card .field-hint { min-height: 0; margin-top: 3px; }
.register-card .register-options { margin-top: 9px; gap: 7px 12px; font-size: 13px; }
.register-card .register-options select { padding: 5px 7px; }
.register-card .form-actions { margin-top: 10px; }
.register-card .btn-login { min-height: 44px; }
.register-card .auth-switch { margin-top: 9px; padding-top: 8px; }
.register-card .back-link { margin-top: 10px; }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.name-row .field { min-width: 0; }
.name-row .field input { padding-left: 42px; }
.name-row .input-icon .icon { left: 7px; }

.register-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted, #64748b);
  font-size: 14px;
}

.register-options label { display: inline-flex; align-items: center; gap: 7px; }
.register-options input { accent-color: var(--blue, #0a66c2); }
.register-options select { border: 1px solid #dfe7f2; border-radius: 8px; padding: 7px; color: #16345d; }

@media (min-width: 761px) and (max-height: 800px) {
  .admin-login-page { padding: 16px; }
  .admin-login-page .login-root { min-height: calc(100vh - 32px); }
  .register-card-wrap { padding: 12px; }
  .register-card { padding: 10px 20px 10px; }
  .register-card .card-header { margin-bottom: 4px; }
  .register-card .sg-logo-top { width: 44px; height: 44px; }
  .register-card .card-title h1 { font-size: 25px; }
  .register-card .muted { margin-top: 3px; font-size: 13px; }
  .register-card .field { margin-top: 5px; }
  .register-card .field input,
  .register-card .password-wrap input { min-height: 36px; margin: 0; padding-top: 6px; padding-bottom: 6px; }
  .register-card .availability-indicator { margin-top: 4px; }
  .register-card .field-hint { margin-top: 2px; }
  .register-card .register-options { margin-top: 6px; gap: 5px 10px; }
  .register-card .form-actions { margin-top: 7px; }
  .register-card .btn-login { min-height: 40px; }
  .register-card .auth-switch { margin-top: 6px; padding-top: 5px; }
}

@media (max-width: 1024px) {
  .admin-login-page .login-root { width: min(620px, 100%); }
  .admin-login-page .right-card { min-height: 100%; }
  .register-card-wrap { padding: 24px 16px; }
}

@media (max-width: 760px) {
  .admin-login-page { padding: 0; align-items: stretch; }
  .admin-login-page .login-root { min-height: 100vh; align-items: start; border-radius: 0; }
  .admin-login-page .right-card { padding: 20px 14px 26px; }
  .admin-login-page .card:not(.register-card) { padding: 24px 20px 22px; }
  .admin-login-page .card:not(.register-card) .sg-logo-top { width: 62px; height: 62px; }
  .admin-login-page .card:not(.register-card) .card-header { margin-bottom: 12px; }
  .admin-login-page .card:not(.register-card) .field { margin-top: 12px; }
  .admin-login-page .card:not(.register-card) .field input,
  .admin-login-page .card:not(.register-card) .password-wrap input {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
  }
  .admin-login-page .card:not(.register-card) .btn-login { min-height: 52px; }
  .admin-login-page .form-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .register-card-wrap { max-height: 100vh; padding: 10px 8px 14px; }
  .register-card { padding: 14px 14px 12px; }
  .register-card .sg-logo-top { width: 48px; height: 48px; }
  .register-card .card-title h1 { font-size: 25px; }
  .register-card .field input,
  .register-card .password-wrap input { min-height: 42px; font-size: 14px; }
  .register-card .login-button { width: 100%; margin-top: 8px; }
  .name-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .name-row .field { margin-top: 10px; }
  .name-row .field input { padding-left: 38px; font-size: 13px; }
  .name-row .input-icon .icon { left: 5px; }
}

@media (max-width: 360px) {
  .admin-login-page .right-card { padding-inline: 10px; }
  .admin-login-page .card:not(.register-card) { padding-inline: 16px; }
  .register-card { padding-inline: 14px; }
  .name-row { grid-template-columns: 1fr; gap: 0; }
  .register-card .register-options { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 320px) {
  .register-card-wrap { padding-inline: 8px; }
  .register-card { padding-inline: 12px; }
  .register-card .card-title h1 { font-size: 23px; }
  .register-card .muted { font-size: 13px; }
}