/* ==========================================================================
 * 船联汇 VesselNexus — B1 Ultimate Member Integration
 * ==========================================================================
 * §1. Login Form
 * §2. Registration Form (3-Channel Layout)
 * §3. Account Dashboard
 * §4. Profile Edit Form
 * §5. Member Directory Cards
 * §6. Password Reset
 * §7. UM Notices & Messages
 *
 * 依赖: vnx-design-tokens.css, Ultimate Member plugin
 * @package VesselNexus
 * @version 2.3.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. LOGIN FORM
   ═══════════════════════════════════════════════════════════════════════ */

/* UM form wrapper */
.um-form {
  max-width: 480px;
  margin: 0 auto;
}

.um .um-form .um-header {
  text-align: center;
  margin-bottom: var(--vnx-space-8);
}

.um .um-form .um-header .um-title {
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-2xl) !important;
  font-weight: var(--vnx-font-bold) !important;
  color: var(--vnx-text-primary) !important;
  margin: 0 0 var(--vnx-space-2) !important;
}

/* Input fields */
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="url"],
.um input[type="tel"],
.um input[type="number"],
.um select {
  height: 48px !important;
  padding: 0 var(--vnx-space-4) !important;
  border: 1.5px solid var(--vnx-border-default) !important;
  border-radius: var(--vnx-radius-md) !important;
  background: var(--vnx-white) !important;
  font-family: var(--vnx-font-family-body) !important;
  font-size: var(--vnx-text-base) !important;
  color: var(--vnx-text-primary) !important;
  transition: border-color var(--vnx-duration-fast), box-shadow var(--vnx-duration-fast);
  box-sizing: border-box;
}

.um input:focus,
.um select:focus {
  outline: none !important;
  border-color: var(--vnx-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(46, 123, 196, 0.15) !important;
}

/* Field labels */
.um-field-label label {
  font-size: var(--vnx-text-sm) !important;
  font-weight: var(--vnx-font-medium) !important;
  color: var(--vnx-text-primary) !important;
}

/* Required indicator */
.um .um-field-required {
  color: var(--vnx-color-danger) !important;
}

/* ── Submit Button ── */
.um input[type="submit"].um-button,
.um .um-button {
  width: 100% !important;
  height: 48px !important;
  padding: 0 var(--vnx-space-6) !important;
  border: none !important;
  border-radius: var(--vnx-radius-lg) !important;
  background: linear-gradient(135deg, var(--vnx-gold-500), var(--vnx-gold-400)) !important;
  color: var(--vnx-ocean-950) !important;
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-base) !important;
  font-weight: var(--vnx-font-bold) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(212, 152, 10, 0.25) !important;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out) !important;
}

.um .um-button:hover {
  box-shadow: 0 4px 16px rgba(212, 152, 10, 0.4) !important;
  transform: translateY(-1px);
}

/* ── Secondary button (Cancel, Back) ── */
.um .um-alt-button {
  background: var(--vnx-white) !important;
  border: 1.5px solid var(--vnx-gray-300) !important;
  color: var(--vnx-gray-700) !important;
  box-shadow: none !important;
}

.um .um-alt-button:hover {
  border-color: var(--vnx-ocean-500) !important;
  color: var(--vnx-ocean-600) !important;
  background: var(--vnx-ocean-50) !important;
  transform: translateY(-1px);
}

/* ── Links (forgot password, etc.) ── */
.um .um-field-area a,
.um-form a {
  color: var(--vnx-ocean-500) !important;
  text-decoration: none;
  font-weight: var(--vnx-font-medium);
}

.um .um-field-area a:hover,
.um-form a:hover {
  color: var(--vnx-ocean-600) !important;
  text-decoration: underline;
}

/* ── Divider "or" text ── */
.um .um-divider {
  text-align: center;
  margin: var(--vnx-space-6) 0;
  position: relative;
}

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

.um .um-divider span {
  display: inline-block;
  padding: 0 var(--vnx-space-4);
  background: var(--vnx-white);
  position: relative;
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. REGISTRATION FORM (3-Channel)
   ═══════════════════════════════════════════════════════════════════════ */

/* Channel selection bar */
.vnx-reg-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vnx-space-3);
  margin-bottom: var(--vnx-space-8);
}

.vnx-reg-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vnx-space-2);
  padding: var(--vnx-space-5) var(--vnx-space-4);
  border-radius: var(--vnx-radius-xl);
  border: 2px solid var(--vnx-border-light);
  background: var(--vnx-white);
  text-align: center;
  cursor: pointer;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out);
}

.vnx-reg-channel:hover {
  border-color: var(--vnx-ocean-300);
  background: var(--vnx-ocean-50);
}

.vnx-reg-channel--active {
  border-color: var(--vnx-ocean-500);
  background: var(--vnx-ocean-50);
  box-shadow: var(--vnx-shadow-glow-ocean);
}

.vnx-reg-channel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--vnx-radius-full);
  font-size: 28px;
}

.vnx-reg-channel__icon--a { background: #2563A8; color: #fff; } /* 企业邮箱 */
.vnx-reg-channel__icon--b { background: #219653; color: #fff; } /* 营业执照 */
.vnx-reg-channel__icon--c { background: var(--vnx-gold-500); color: #0A1628; } /* 语音验证 */

.vnx-reg-channel__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-base);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0;
}

.vnx-reg-channel__desc {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
  line-height: var(--vnx-leading-snug);
}

.vnx-reg-channel__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-gold-100);
  color: var(--vnx-gold-700);
  font-size: 10px;
  font-weight: var(--vnx-font-bold);
  text-transform: uppercase;
}

/* ── Confidence meter (registration form) ── */
.vnx-reg-confidence {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-4);
  border-radius: var(--vnx-radius-lg);
  background: var(--vnx-gray-50);
  margin-bottom: var(--vnx-space-4);
}

.vnx-reg-confidence__meter {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--vnx-gray-200);
  overflow: hidden;
}

.vnx-reg-confidence__fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--vnx-duration-slower) var(--vnx-ease-out);
}

.vnx-reg-confidence__text {
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. ACCOUNT DASHBOARD (UM Account)
   ═══════════════════════════════════════════════════════════════════════ */

/* UM Account tabs */
.um-account {
  display: flex;
  gap: var(--vnx-space-8);
  max-width: var(--vnx-content-max-width);
  margin: 0 auto;
}

.um-account-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 220px;
  flex-shrink: 0;
}

.um-account-tab a {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-3) var(--vnx-space-4);
  border-radius: var(--vnx-radius-md);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-secondary) !important;
  text-decoration: none !important;
  transition: all var(--vnx-duration-fast);
}

.um-account-tab a:hover {
  background: var(--vnx-gray-100);
  color: var(--vnx-text-primary) !important;
}

.um-account-tab a.current {
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-600) !important;
  font-weight: var(--vnx-font-semibold);
}

.um-account-main {
  flex: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. PROFILE EDIT FORM
   ═══════════════════════════════════════════════════════════════════════ */

/* Avatar upload */
.um-profile-photo {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-4);
  margin-bottom: var(--vnx-space-6);
}

.um-profile-photo img {
  width: 96px;
  height: 96px;
  border-radius: var(--vnx-radius-full);
  object-fit: cover;
  border: 3px solid var(--vnx-white);
  box-shadow: var(--vnx-shadow-md);
}

/* Cover photo */
.um-cover {
  border-radius: var(--vnx-radius-xl) var(--vnx-radius-xl) 0 0;
  overflow: hidden;
  height: 200px;
  background: linear-gradient(135deg, var(--vnx-ocean-600), var(--vnx-ocean-800));
}

/* Profile header */
.um-profile-header {
  margin-bottom: var(--vnx-space-8);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. MEMBER DIRECTORY
   ═══════════════════════════════════════════════════════════════════════ */

.um-directory .um-member {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  overflow: hidden;
  transition: box-shadow var(--vnx-duration-normal);
}

.um-directory .um-member:hover {
  box-shadow: var(--vnx-shadow-lg);
}

.um-member__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.um-member__name {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-base);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. NOTICES & ERROR MESSAGES
   ═══════════════════════════════════════════════════════════════════════ */

.um-notice {
  padding: var(--vnx-space-3) var(--vnx-space-4) !important;
  border-radius: var(--vnx-radius-md) !important;
  font-size: var(--vnx-text-sm) !important;
  line-height: var(--vnx-leading-normal) !important;
  margin-bottom: var(--vnx-space-4) !important;
}

.um-notice.um-notice-success {
  background: var(--vnx-color-success-bg) !important;
  color: #1a6e3a !important;
  border: 1px solid rgba(33, 150, 83, 0.2) !important;
}

.um-notice.um-notice-error,
.um-error {
  background: var(--vnx-color-danger-bg) !important;
  color: #a82a2a !important;
  border: 1px solid rgba(217, 54, 54, 0.2) !important;
}

.um-notice.um-notice-warning {
  background: var(--vnx-color-warning-bg) !important;
  color: #6b4a00 !important;
  border: 1px solid rgba(212, 152, 10, 0.2) !important;
}

.um-notice.um-notice-info {
  background: var(--vnx-color-info-bg) !important;
  color: #1a4d7a !important;
  border: 1px solid rgba(46, 123, 196, 0.2) !important;
}

/* Field-level errors */
.um-field-error {
  background: transparent !important;
  color: var(--vnx-color-danger) !important;
  font-size: var(--vnx-text-xs) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. PASSWORD RESET & MISC
   ═══════════════════════════════════════════════════════════════════════ */

.um-password-reset {
  max-width: 480px;
  margin: 0 auto;
}

/* UM profile completeness bar */
.um-profile-completeness {
  height: 4px;
  border-radius: 2px;
  background: var(--vnx-gray-200);
  margin-bottom: var(--vnx-space-6);
}

.um-profile-completeness__bar {
  height: 100%;
  border-radius: 2px;
  background: var(--vnx-color-success);
  transition: width var(--vnx-duration-slower);
}

/* ═══════════════════════════════════════════════════════════════════════
   §8. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .um-account {
    flex-direction: column;
  }

  .um-account-tab {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }

  .vnx-reg-channels {
    grid-template-columns: 1fr;
  }

  .vnx-reg-channels .vnx-reg-channel {
    flex-direction: row;
    text-align: left;
    gap: var(--vnx-space-3);
  }

  .um .um-form {
    max-width: 100%;
  }
}