/* ==========================================================================
   Estate Sale Connect — application & legacy-form compatibility layer
   The auth pages and the signed-in app were written against their own class
   names (.form-group, .form-error, .btn-primary, .message …). Rather than
   rewriting that JavaScript, these rules re-home those class names on the
   new design tokens so the behaviour is untouched and the look matches.
   ========================================================================== */

/* ---------- Legacy form groups ---------- */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.form-group label {
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.form-group input[type='text'], .form-group input[type='email'], .form-group input[type='tel'],
.form-group input[type='password'], .form-group input[type='url'], .form-group input[type='number'],
.form-group input[type='date'], .form-group input[type='search'],
.form-group select, .form-group textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-group textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.4rem;
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--brand-500); }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible {
  outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 3px var(--accent-100);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--ink-faint); }

.form-error { display: none; font-size: var(--step--2); font-weight: 500; color: var(--err-700); }
.form-group.error .form-error { display: block; }
.form-group.error input, .form-group.error select, .form-group.error textarea {
  border-color: var(--err-600); background: var(--err-50);
}

/* Checkbox rows.
   .checkbox-row is listed in its own right: it is not always nested inside a
   .form-group, and when it was not, the box fell back to the browser's blue. */
.form-group input[type='checkbox'], .form-group input[type='radio'],
.checkbox-row > input[type='checkbox'], .checkbox-row > input[type='radio'],
.checkbox-group > input[type='checkbox'], .checkbox-group > input[type='radio'] {
  width: 20px; height: 20px; min-height: 0; accent-color: var(--accent-600); flex: none; cursor: pointer;
}
.checkbox-group, .checkbox-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-body);
}
.checkbox-group label, .checkbox-row label { font-weight: 400; line-height: 1.55; }

/* ---------- Legacy buttons ---------- */
.btn-primary, .signin-btn, .submit-btn, .btn.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 1rem 1.75rem; min-height: 52px; width: 100%;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--accent-500); color: var(--ink);
  font-size: var(--step-0); font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .18s, transform .12s;
}
.btn-primary:hover, .signin-btn:hover, .submit-btn:hover { background: var(--accent-400); color: var(--ink); }
.btn-primary:active, .signin-btn:active, .submit-btn:active { transform: translateY(1px); }
.btn-primary[disabled], .signin-btn[disabled], .submit-btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-secondary, .btn.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .85rem 1.5rem; min-height: 48px;
  border-radius: var(--r-md);
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong);
  font-size: var(--step--1); font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: var(--paper-sunk); border-color: var(--brand-500); color: var(--ink); }

/* ---------- Messages ---------- */
#messageContainer { margin-bottom: var(--sp-5); }
#messageContainer:empty { margin-bottom: 0; }
.message {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--step--1);
  line-height: 1.55;
}
.message + .message { margin-top: var(--sp-3); }
.message.error   { background: var(--err-50);  border-color: var(--err-100);  color: var(--err-700); }
.message.success { background: var(--ok-50);   border-color: var(--ok-100);   color: var(--ok-700); }
.message.warning { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-800); }
.message.info    { background: var(--sage-50); border-color: var(--sage-100); color: var(--sage-700); }

/* ---------- Password strength ---------- */
.password-strength {
  height: 4px; border-radius: var(--r-full);
  background: var(--paper-deep); overflow: hidden; margin-top: var(--sp-2);
}
.password-strength-bar {
  height: 100%; width: 0; border-radius: var(--r-full);
  transition: width .25s var(--ease-out), background-color .25s;
}
.password-strength-bar.weak   { width: 33%; background: var(--err-600); }
.password-strength-bar.medium { width: 66%; background: var(--accent-600); }
.password-strength-bar.strong { width: 100%; background: var(--ok-600); }

/* ---------- Loading spinner used by legacy pages ---------- */
.loading {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .7;
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -2px; margin-right: .4rem;
}

/* ---------- Two-column form rows ---------- */
.form-row { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-row > * { min-width: 0; }

/* ---------- Section headings inside forms ---------- */
.form-section-heading {
  font-family: var(--font-sans);
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  padding-top: var(--sp-6); margin-bottom: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.form-section-heading:first-child { padding-top: 0; border-top: 0; }