/* Sign-in page and the signed-out error page (Views/Shared/_LoginLayout.cshtml). Same as NextHse's and NextCRM's
   login.css. Shared by every tenant before sign-in, so it carries the AtashiTech look and is always light:
   a cream ground with soft copper glows, a white card with a 4px copper top edge, the wordmark,
   a full-width copper button. Values from the AtashiTech design system (~/.claude/docs/atashitech-design.md). */

:root {
  color-scheme: light;
  --at-page: #FCF4EA;
  --at-line: #EAD9C6;
  --at-ink: #2B1D16;
  --at-body: #5A4A3E;
  --at-muted: #6B5A4C;
  --at-heading: #3A2D22;
  --at-copper: #B87333;
  --at-copper-dark: #8E5524;
  --at-button: #A8652B;
  --at-button-hover: #8E5524;
  --at-danger: #A12525;
}

html, body { min-height: 100%; }

.at-auth {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .875rem;
  color: var(--at-ink);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(184, 115, 51, .16), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(154, 91, 60, .14), transparent 60%),
    var(--at-page);
}
/* The line along the top, as on every AtashiTech page. */
.at-auth::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #3A2D22, #B87333, #F0D3B6);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  padding: .5rem .75rem;
  background: #fff;
  color: var(--at-copper-dark);
  border-radius: 6px;
}
.skip-link:focus { left: 16px; }

.at-auth-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 16px;
}

.at-auth-card {
  width: 100%;
  max-width: 440px;
  padding: 2.25rem 2rem 2rem;
  background: #fff;
  border: 1px solid var(--at-line);
  border-top: 4px solid var(--at-copper);
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(58, 45, 34, .12);
}
.at-auth-logo { height: 46px; max-width: 100%; }
.at-auth-tagline { margin: .9rem 0 0; color: var(--at-body); font-size: .85rem; }
.at-auth-product { color: var(--at-copper-dark); font-weight: 600; }
.at-auth-title { margin: 1.5rem 0 .25rem; font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--at-heading); }
.at-auth-subtitle { margin: 0 0 1.25rem; text-align: center; color: var(--at-muted); }
.at-auth-footer { margin: 1.5rem 0 0; color: var(--at-muted); font-size: .8rem; text-align: center; }

.at-auth .form-label { color: var(--at-body); font-weight: 600; font-size: .8125rem; margin-bottom: .35rem; }
.at-auth .input-group-text { background: var(--at-page); border-color: var(--at-line); color: var(--at-muted); }
.at-auth .form-control { border-color: var(--at-line); color: var(--at-ink); font-size: .9rem; padding: .55rem .75rem; }
.at-auth .form-control::placeholder { color: #8C7B6D; }
.at-auth .form-control:focus { border-color: var(--at-copper); box-shadow: 0 0 0 3px rgba(184, 115, 51, .2); }
.at-auth .form-control.is-invalid { border-color: var(--at-danger); }
.at-auth .invalid-feedback { color: var(--at-danger); font-size: .78rem; min-height: 1rem; }
.at-auth .alert-danger { color: var(--at-danger); background: rgba(161, 37, 37, .08); border-color: rgba(161, 37, 37, .25); border-radius: 6px; }

.at-auth-eye {
  border: 1px solid var(--at-line);
  border-left: 0;
  background: #fff;
  color: var(--at-muted);
}
.at-auth-eye:hover, .at-auth-eye:focus-visible { color: var(--at-copper-dark); background: var(--at-page); }
.at-auth .is-invalid ~ .at-auth-eye { border-color: var(--at-danger); }

.at-auth-btn {
  padding: .65rem 1rem;
  border: 1px solid var(--at-button);
  border-radius: 6px;
  background: var(--at-button);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.at-auth-btn:hover, .at-auth-btn:focus-visible, .at-auth-btn:active { background: var(--at-button-hover) !important; border-color: var(--at-button-hover) !important; color: #fff !important; }
.at-auth-btn:focus-visible { outline: 3px solid var(--at-copper); outline-offset: 2px; }
.at-auth-btn:disabled { background: var(--at-button); border-color: var(--at-button); color: #fff; opacity: .75; }

.at-auth a:not(.btn) { color: var(--at-copper-dark); }
.at-auth-icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--at-copper-dark); }
.at-auth-icon.is-danger { color: var(--at-danger); }

@media (max-width: 420px) {
  .at-auth-card { padding: 1.75rem 1.25rem 1.5rem; }
}