/* ═══════════════════════════════════════════════════════════════════
   VesselNexus — 用户中心 (P2) / Account Center
   覆盖：/account/ 页面、船舶详情页收藏按钮、头部用户菜单下拉
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 页面框架 ── */
.vnx-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vnx-space-4);
  margin-bottom: var(--vnx-space-6);
}

.vnx-dash-user {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
}

.vnx-dash-user .vnx-avatar {
  width: 48px;
  height: 48px;
  font-size: var(--vnx-text-lg);
  background: var(--vnx-ocean-700);
}

.vnx-dash-user__info {
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-1);
}

.vnx-dash-user__name {
  font-size: var(--vnx-text-md);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

.vnx-dash-user__email {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
}

.vnx-account-head__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vnx-space-2);
}

/* ── 2. 徽章（账户作用域补充色）── */
.vnx-badge {
  display: inline-block;
  padding: var(--vnx-space-1) var(--vnx-space-2);
  border-radius: var(--vnx-radius-full);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  white-space: nowrap;
}

.vnx-badge--green { background: var(--vnx-color-success-bg);   color: var(--vnx-color-success); }
.vnx-badge--red   { background: var(--vnx-color-danger-bg);    color: var(--vnx-color-danger); }
.vnx-badge--gray  { background: var(--vnx-gray-200);           color: var(--vnx-gray-600); }
.vnx-badge--blue  { background: var(--vnx-color-info-bg);      color: var(--vnx-ocean-700); }
.vnx-badge--gold  { background: var(--vnx-color-warning-bg);   color: var(--vnx-gold-900); }
.vnx-badge--l1    { background: var(--vnx-gray-200);           color: var(--vnx-gray-700); }
.vnx-badge--l2    { background: var(--vnx-ocean-100);          color: var(--vnx-ocean-700); }
.vnx-badge--l3    { background: var(--vnx-gold-100);           color: var(--vnx-gold-900); }
.vnx-badge--channel-a { background: var(--vnx-color-success-bg); color: var(--vnx-color-success); }
.vnx-badge--channel-b { background: var(--vnx-ocean-100);        color: var(--vnx-ocean-700); }
.vnx-badge--channel-c { background: var(--vnx-gray-200);         color: var(--vnx-gray-600); }

/* ── 3. 导航 Tab 条 ── */
.vnx-account {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--vnx-space-6);
  align-items: start;
}

.vnx-account-nav {
  position: sticky;
  top: 96px;
}

.vnx-dash-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-1);
  background: var(--vnx-surface-card);
  border: 1px solid var(--vnx-border-light);
  border-radius: var(--vnx-radius-lg);
  padding: var(--vnx-space-2);
}

.vnx-dash-nav__link {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-2);
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border-radius: var(--vnx-radius-md);
  color: var(--vnx-text-secondary);
  text-decoration: none;
  font-size: var(--vnx-text-base);
  font-weight: var(--vnx-font-medium);
  transition: background var(--vnx-duration-fast, 0.15s), color var(--vnx-duration-fast, 0.15s);
}

.vnx-dash-nav__link:hover {
  background: var(--vnx-gray-100);
  color: var(--vnx-text-primary);
}

.vnx-dash-nav__link.is-active {
  background: var(--vnx-ocean-100);
  color: var(--vnx-ocean-700);
  font-weight: var(--vnx-font-semibold);
}

.vnx-dash-nav__icon {
  width: 1.4em;
  text-align: center;
}

.vnx-dash-nav__badge {
  margin-left: auto;
  min-width: 1.4em;
  text-align: center;
  background: var(--vnx-gold-200);
  color: var(--vnx-gold-900);
  border-radius: var(--vnx-radius-full);
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-bold);
  padding: 2px 6px;
}

/* ── 4. 面板 ── */
.vnx-account-panel {
  display: none; /* JS hash 路由控制显隐; 默认只显示第一个 */
  background: var(--vnx-surface-card);
  border: 1px solid var(--vnx-border-light);
  border-radius: var(--vnx-radius-lg);
  padding: var(--vnx-space-6);
}

#panel-favorites { display: block; }

.vnx-account-panel__title {
  font-size: var(--vnx-text-xl);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-4);
}

.vnx-account-empty {
  color: var(--vnx-text-secondary);
  font-size: var(--vnx-text-base);
  line-height: var(--vnx-leading-relaxed);
}

.vnx-account-note {
  color: var(--vnx-text-secondary);
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-relaxed);
  margin: var(--vnx-space-3) 0;
}

.vnx-account-cta {
  margin: var(--vnx-space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--vnx-space-4);
  flex-wrap: wrap;
}

.vnx-account-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vnx-space-4);
  flex-wrap: wrap;
  background: var(--vnx-surface-highlight);
  border: 1px solid var(--vnx-border-accent);
  border-radius: var(--vnx-radius-md);
  padding: var(--vnx-space-3) var(--vnx-space-4);
  margin-bottom: var(--vnx-space-4);
  font-size: var(--vnx-text-base);
  line-height: var(--vnx-leading-normal);
}

.vnx-account-ledger-head p { margin: 0; }

/* ── 5. 表格 ── */
.vnx-table-wrapper {
  overflow-x: auto;
  margin: var(--vnx-space-4) 0;
}

.vnx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vnx-text-sm);
}

.vnx-table th {
  text-align: left;
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border-bottom: 2px solid var(--vnx-border-default);
  color: var(--vnx-text-secondary);
  font-weight: var(--vnx-font-semibold);
  white-space: nowrap;
}

.vnx-table td {
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border-bottom: 1px solid var(--vnx-border-light);
  color: var(--vnx-text-primary);
  vertical-align: middle;
}

.vnx-table--striped tbody tr:nth-child(odd) { background: var(--vnx-gray-50); }
.vnx-table--hover tbody tr:hover { background: var(--vnx-ocean-50); }
.vnx-table--compact th, .vnx-table--compact td { padding: var(--vnx-space-1) var(--vnx-space-2); }

.vnx-table a {
  color: var(--vnx-text-link);
  text-decoration: none;
}

.vnx-table a:hover { text-decoration: underline; }

/* ── 6. 表单 ── */
.vnx-form-group { margin-bottom: var(--vnx-space-3); }

.vnx-form-group label {
  display: block;
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-secondary);
  margin-bottom: var(--vnx-space-1);
}

.vnx-form-group select,
.vnx-form-group input[type="file"],
.vnx-form-group textarea {
  width: 100%;
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border: 1px solid var(--vnx-border-default);
  border-radius: var(--vnx-radius-md);
  font-size: var(--vnx-text-base);
  font-family: var(--vnx-font-family-body);
  background: var(--vnx-surface-card);
  color: var(--vnx-text-primary);
}

.vnx-form-group textarea { resize: vertical; }

.vnx-form-group select:focus,
.vnx-form-group textarea:focus {
  outline: none;
  border-color: var(--vnx-border-focus);
  box-shadow: 0 0 0 3px var(--vnx-ocean-100);
}

.vnx-form-grid { display: grid; gap: var(--vnx-space-3); }
.vnx-form-grid--2 { grid-template-columns: 1fr 1fr; }

.vnx-appeal-form-card { margin-bottom: var(--vnx-space-5); }

.vnx-appeal-status,
.vnx-proof-status {
  display: inline-block;
  margin-left: var(--vnx-space-3);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
}

/* ── 7. 凭证上传 ── */
.vnx-proof-list {
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-3);
}

.vnx-card {
  background: var(--vnx-surface-card);
  border: 1px solid var(--vnx-border-light);
  border-radius: var(--vnx-radius-lg);
}

.vnx-card__body { padding: var(--vnx-space-4) var(--vnx-space-5); }

.vnx-proof-item__title {
  display: block;
  margin-bottom: var(--vnx-space-2);
  color: var(--vnx-text-primary);
}

.vnx-proof-form {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  flex-wrap: wrap;
  margin-top: var(--vnx-space-2);
}

.vnx-proof-form input[type="file"] {
  font-size: var(--vnx-text-sm);
}

.vnx-proof-item__violations {
  color: var(--vnx-color-danger);
  font-size: var(--vnx-text-sm);
  margin: var(--vnx-space-2) 0 0;
}

/* ── 8. 积分资料 ── */
.vnx-credit-balance {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-4);
  background: linear-gradient(135deg, var(--vnx-ocean-900), var(--vnx-ocean-700));
  border-radius: var(--vnx-radius-lg);
  padding: var(--vnx-space-6);
  color: var(--vnx-text-inverse);
  margin-bottom: var(--vnx-space-5);
}

.vnx-credit-balance__num {
  font-size: var(--vnx-text-4xl);
  font-weight: var(--vnx-font-extrabold);
  color: var(--vnx-gold-400);
  line-height: 1;
}

.vnx-credit-balance__label {
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-1);
  font-size: var(--vnx-text-md);
  font-weight: var(--vnx-font-medium);
}

.vnx-credit-balance__label small {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-ocean-200);
  font-weight: var(--vnx-font-regular);
}

.vnx-account-panel h3 {
  font-size: var(--vnx-text-lg);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: var(--vnx-space-5) 0 var(--vnx-space-2);
}

/* ── 9. 访客登录卡 ── */
.vnx-account-guest .vnx-card { max-width: 560px; }
.vnx-account-guest h2 { margin-top: 0; }

/* ── 10. 船舶详情页收藏按钮 ── */
.vnx-ship-detail__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vnx-space-3);
}

.vnx-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--vnx-space-1);
  margin-left: auto;
  padding: var(--vnx-space-1) var(--vnx-space-3);
  border: 1px solid var(--vnx-border-default);
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-surface-card);
  color: var(--vnx-text-secondary);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  cursor: pointer;
  transition: all var(--vnx-duration-fast, 0.15s);
}

.vnx-fav-btn:hover {
  border-color: var(--vnx-gold-500);
  color: var(--vnx-gold-700);
}

.vnx-fav-btn--active {
  border-color: var(--vnx-gold-500);
  background: var(--vnx-gold-50);
  color: var(--vnx-gold-700);
}

.vnx-fav-btn:disabled { opacity: 0.6; cursor: wait; }

/* ── 11. 头部用户菜单下拉 ── */
.vnx-user-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--vnx-space-2));
  right: 0;
  z-index: 60;
  min-width: 220px;
  background: var(--vnx-surface-card);
  border: 1px solid var(--vnx-border-light);
  border-radius: var(--vnx-radius-lg);
  box-shadow: var(--vnx-shadow-md);
  padding: var(--vnx-space-2);
  display: none;
}

.vnx-user-menu--open .vnx-user-menu__dropdown { display: block; }

.vnx-user-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vnx-space-2);
  padding: var(--vnx-space-2) var(--vnx-space-3) var(--vnx-space-3);
  border-bottom: 1px solid var(--vnx-border-light);
  margin-bottom: var(--vnx-space-1);
}

.vnx-user-menu__head strong {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vnx-user-menu__link {
  display: block;
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border-radius: var(--vnx-radius-md);
  color: var(--vnx-text-primary);
  text-decoration: none;
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
}

.vnx-user-menu__link:hover {
  background: var(--vnx-gray-100);
}

.vnx-user-menu__logout {
  display: block;
  padding: var(--vnx-space-2) var(--vnx-space-3);
  border-radius: var(--vnx-radius-md);
  color: var(--vnx-color-danger);
  text-decoration: none;
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
}

.vnx-user-menu__logout:hover { background: var(--vnx-color-danger-bg); }

/* ── 12. 响应式 ── */
@media (max-width: 1023px) {
  .vnx-account {
    grid-template-columns: 1fr;
    gap: var(--vnx-space-4);
  }

  .vnx-account-nav {
    position: static;
  }

  .vnx-dash-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--vnx-space-1);
  }

  .vnx-dash-nav__link {
    padding: var(--vnx-space-1) var(--vnx-space-2);
    font-size: var(--vnx-text-sm);
  }

  .vnx-dash-nav__badge { margin-left: 0; }

  .vnx-account-panel {
    padding: var(--vnx-space-4);
  }

  .vnx-form-grid--2 { grid-template-columns: 1fr; }

  .vnx-account-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .vnx-fav-btn { margin-left: 0; }

  .vnx-user-menu__dropdown {
    right: -60px;
  }
}