/*
 * Shared presentation for the standalone auth pages (login, FinishSetup, PasswordReset,
 * forgotPassword).
 *
 * These rules used to live in an inline <style> block repeated on every page. Inline styles are
 * blocked by a `style-src 'self'` Content-Security-Policy, and the app ships a CSP in
 * Report-Only mode with instructions to switch it to enforcing — so the background silently
 * disappearing was one more thing that flip would have broken. One external sheet instead.
 */

.wm-auth-page {
    background-image: url('/assets/media/auth/login_bg_2.jpg');
}

[data-bs-theme="dark"] .wm-auth-page {
    background-image: url('/assets/media/auth/login_bg_2.jpg');
}

/*
 * Touch target floor for the auth forms. The project UX guidelines put primary actions at 48px
 * minimum and form inputs at >= 16px font-size (below that, iOS Safari auto-zooms the page on
 * focus, which on a password field is both jarring and a legibility problem).
 */
.wm-auth-page .form-control {
    min-height: 48px;
    font-size: 1rem;
}

.wm-auth-page .btn {
    min-height: 48px;
}

/* Icon-only and inline links still need a visible focus ring for keyboard users. */
.wm-auth-page a:focus-visible,
.wm-auth-page button:focus-visible,
.wm-auth-page .form-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 142, 90, 0.35);
}

/* ---- Extracted from login.html's inline <style> block (CSP). ---- */
.hidden-section {
  display: none !important;
}
/* Instance selection container should be centered and have a gap */
#instanceSection {
  min-height: 300px;
}
#instancesContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
/* Style for each instance item */
.instance-item {
  cursor: pointer;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.instance-item:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Right arrow styling */
.instance-arrow {
  margin-left: auto;
  font-size: 1.25rem;
  color: #6c757d;
}
/* Disabled / grayed-out styling */
.disabled-instance {
  opacity: 0.5;
  pointer-events: none;
}

/* Spinner that replaces the arrow icon */
.small-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * .instance-item is a <button> now (it was a clickable <div>, invisible to keyboard and
 * screen-reader users), so the default button chrome has to be reset back to the card look.
 */
.instance-item {
    border: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}