/*
 * Sign-in and account pages. These render without the app shell, so they carry
 * their own centred layout — still on the same tokens as everything else.
 */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
  background: var(--background-subtle);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.auth-brand-name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.auth-title {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.auth-subtitle {
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
}

.auth-error {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--text-base);
}

.auth-status {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background-subtle);
  font-size: var(--text-base);
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  height: 34px;
}

/* The same button as an anchor, on the pages whose next step is a link. */
a.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.auth-submit:hover {
  text-decoration: none;
}

/* An explanation under the form, rather than an error or a status. */
.auth-note {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
}

.auth-note:last-child {
  margin-bottom: 0;
}

.auth-divider {
  position: relative;
  margin: var(--space-5) 0;
  text-align: center;
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  position: relative;
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.auth-links {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-base);
}

/*
 * The account-management pages keep the framework's markup; these rules give
 * them the same look without rewriting every one of them.
 */
.account-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-7);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
  align-items: start;
}

/* The page itself, so a form is not left floating on the background. */
.account-panel {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.account-panel h3,
.account-panel h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
}

.account-panel h3 + p,
.account-panel h4 + p,
.account-panel > p {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
}

.account-panel ol,
.account-panel ul {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--text-secondary);
}

.account-panel li {
  margin-bottom: var(--space-4);
}

.account-panel kbd {
  padding: 2px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/*
 * Inside the panel the framework's grid is just a block. Left alone, its own
 * max-width, centring and padding would centre the content a second time
 * inside a column that is already centred, which is what pushed every form off
 * to one side of its own page.
 */
.account-panel .row {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* A row of buttons that the scaffold leaves as separate block elements. */
.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* The scaffold makes every submit full width and huge; in a panel it is a button. */
.account-panel .btn.w-100 {
  width: auto;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-base);
  text-decoration: none;
}

.account-nav a:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.account-nav a.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}

@media (max-width: 768px) {
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Compatibility shim for the framework-generated account pages.
 *
 * Those pages ship with Bootstrap class names. Rather than rewrite every one of
 * them, the handful of classes they use are mapped onto our tokens, so password
 * changes and two-factor setup look like the rest of the product.
 */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.row > [class^="col-"],
.row > [class*=" col-"] {
  min-width: 0;
}

.form-floating {
  position: relative;
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column-reverse;
}

.form-label {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 5px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.form-check-input,
.form-check-label {
  cursor: pointer;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.btn-lg {
  height: 34px;
}

.w-100 {
  width: 100%;
}

.mb-3 {
  margin-bottom: var(--space-4);
}

.mt-2 {
  margin-top: var(--space-3);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.btn-link {
  border: none;
  background: transparent;
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
}

.alert {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background-subtle);
  font-size: var(--text-base);
}

.alert-danger {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.alert-success {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.nav-pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-link:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}

/* The 2FA QR code. Capped so it stays scannable without filling the page. */
.qr-code {
  margin: 1rem 0;
  max-width: 220px;
}

.qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The Turnstile widget on the sign-in card. */
.auth-turnstile {
  margin-bottom: var(--space-4);
}