/* =======================
   GothDB – Login Page CSS
   ======================= */

:root {
  --goth-panel-bg: rgba(10, 10, 10, 0.82);
  --goth-panel-border: #3e2d54;
  --goth-accent: #b48aff;        /* primary purple */
  --goth-accent-dark: #885dd2;   /* hover purple */
  --goth-text-primary: #e7e5f2;
  --goth-text-muted: #bdb8cb;
  --goth-radius: 0.9rem;
  --goth-gap: 1rem;
}

/* ---------- Card ---------- */
.login_form {
  max-width: 480px;
  margin: clamp(4rem, 12vh, 7rem) auto 2.5rem;
  padding: 2.6rem 2.2rem 2rem;
  background: var(--goth-panel-bg);
  border: 1px solid var(--goth-panel-border);
  border-radius: var(--goth-radius);
  backdrop-filter: blur(3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 8px 28px rgba(0,0,0,0.55);
}

.login_form h2 {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: .5px;
  color: var(--goth-accent);
  margin-bottom: calc(var(--goth-gap) * 1.6);
}

/* ---------- Fields ---------- */
.form_group { margin-bottom: var(--goth-gap); }

.form_label {
  display: block;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  color: var(--goth-text-primary);
  margin-bottom: 0.35rem;
}

.form_input {
  width: 100%;
  padding: 0.62rem 0.8rem;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  color: var(--goth-text-primary);
  background: #151515;
  border: 1px solid #2b2b2b;
  border-radius: 0.7rem;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.form_input::placeholder { color: #6c6a75; }

.form_input:focus {
  outline: none;
  background: #121212;
  border-color: var(--goth-accent);
  box-shadow: 0 0 0 2px rgba(180,138,255,0.25);
}

/* ---------- Button + Inline Spinner ---------- */
.form_button {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: "EB Garamond", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .2px;
  border: none;
  border-radius: 0.9rem;
  background: var(--goth-accent);
  color: #0c0b10;                 /* button text & spinner color */
  cursor: pointer;
  transition: background .22s ease, transform .12s ease, filter .22s ease;
}

.form_button:hover,
.form_button:focus { background: var(--goth-accent-dark); }
.form_button:active { transform: translateY(1px); }

/* Layout the button so label & spinner center perfectly */
#login_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  position: relative;
}

/* Stand-alone Bootstrap-like spinner */
.spinner-border {
  display: none;                     /* shown only while requesting */
  width: 1rem; height: 1rem;
  border: .15em solid currentColor;  /* inherits from button text color */
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate .75s linear infinite;
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* HTMX toggling – works whether .htmx-request is on the form, button,
   or the spinner (because hx-indicator targets the spinner) */
.htmx-request .spinner-border,
.spinner-border.htmx-request { display: inline-block; }

.htmx-request #login_button .btn-label,
#login_button.htmx-request .btn-label {
  opacity: 0;
  transform: translateY(2px);
}

.htmx-request #login_button,
#login_button.htmx-request {
  pointer-events: none;
  filter: saturate(.9);
}

/* A11y helper (for visually hidden "Logging in…" text) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Status / links ---------- */
#login_status { margin-top: 1rem; min-height: 0; }

.error_message {
  margin-top: .25rem;
  padding: .9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(195, 58, 58, 0.18);
  border: 1px solid rgba(225, 99, 99, 0.35);
  color: var(--goth-text-primary);
}

.login_form p {
  text-align: center;
  font-family: "EB Garamond", serif;
  font-size: 0.95rem;
  margin-top: calc(var(--goth-gap) * 1.2);
  color: var(--goth-text-muted);
}

.login_form a {
  color: var(--goth-accent);
  text-decoration: none;
}
.login_form a:hover { text-decoration: underline; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 480px) {
  .login_form { padding: 2rem 1.25rem 1.5rem; }
}