/* ==========================================================================
 * 船联汇 VesselNexus — B1 Dashboard / 仪表板组件
 * ==========================================================================
 * §1. Dashboard Layout (sidebar + main)
 * §2. Dashboard Navigation (vertical nav)
 * §3. Stat Cards Grid
 * §4. Activity Feed / Timeline
 * §5. Quick Actions
 * §6. Dashboard Widgets (chart container, summary, alert list)
 * §7. Dashboard Header (greeting + date + actions)
 * §8. Empty States
 *
 * 依赖: vnx-design-tokens.css
 * @package VesselNexus
 * @version 2.3.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. DASHBOARD LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dashboard {
  display: flex;
  min-height: calc(100vh - var(--vnx-header-height));
  background: var(--vnx-surface-page);
}

.vnx-dashboard__sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--vnx-white);
  border-right: 1px solid var(--vnx-border-light);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--vnx-header-height);
  height: calc(100vh - var(--vnx-header-height));
  overflow-y: auto;
}

.vnx-dashboard__main {
  flex: 1;
  min-width: 0;
  padding: var(--vnx-space-8);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .vnx-dashboard {
    flex-direction: column;
  }

  .vnx-dashboard__sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--vnx-border-light);
    flex-shrink: 0;
  }

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

/* ═══════════════════════════════════════════════════════════════════════
   §2. DASHBOARD NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-nav {
  padding: var(--vnx-space-4) 0;
}

.vnx-dash-nav__section {
  padding: 0 var(--vnx-space-4);
  margin-bottom: var(--vnx-space-3);
}

.vnx-dash-nav__section-title {
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vnx-tracking-wider);
  padding: var(--vnx-space-2) var(--vnx-space-3);
  margin: 0;
}

.vnx-dash-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vnx-dash-nav__item {
  margin: 1px 0;
}

.vnx-dash-nav__link {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-2) var(--vnx-space-4);
  margin: 0 var(--vnx-space-2);
  border-radius: var(--vnx-radius-md);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-secondary);
  text-decoration: none;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out);
}

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

.vnx-dash-nav__link--active {
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-600);
  font-weight: var(--vnx-font-semibold);
}

.vnx-dash-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 16px;
}

.vnx-dash-nav__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-color-danger);
  color: var(--vnx-white);
  font-size: 10px;
  font-weight: var(--vnx-font-bold);
}

/* ── Dashboard User Info (sidebar top) ── */
.vnx-dash-user {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-5) var(--vnx-space-4);
  border-bottom: 1px solid var(--vnx-border-light);
}

.vnx-dash-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--vnx-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.vnx-dash-user__info {
  min-width: 0;
}

.vnx-dash-user__name {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vnx-dash-user__role {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. STAT CARDS GRID
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--vnx-space-4);
  margin-bottom: var(--vnx-space-8);
}

.vnx-dash-stat {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  padding: var(--vnx-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--vnx-space-4);
  transition: box-shadow var(--vnx-duration-fast);
}

.vnx-dash-stat:hover {
  box-shadow: var(--vnx-shadow-md);
}

.vnx-dash-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--vnx-radius-lg);
  flex-shrink: 0;
  font-size: 22px;
}

.vnx-dash-stat__icon--blue   { background: var(--vnx-ocean-50);  color: var(--vnx-ocean-500); }
.vnx-dash-stat__icon--gold   { background: var(--vnx-gold-50);   color: var(--vnx-gold-500); }
.vnx-dash-stat__icon--green  { background: var(--vnx-green-100); color: var(--vnx-green-500); }
.vnx-dash-stat__icon--red    { background: var(--vnx-red-100);   color: var(--vnx-red-500); }

.vnx-dash-stat__info {
  flex: 1;
  min-width: 0;
}

.vnx-dash-stat__value {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-2xl);
  font-weight: var(--vnx-font-extrabold);
  color: var(--vnx-text-primary);
  line-height: 1;
  margin: 0 0 var(--vnx-space-1);
}

.vnx-dash-stat__label {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

.vnx-dash-stat__change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  margin-top: var(--vnx-space-1);
}

.vnx-dash-stat__change--up   { color: var(--vnx-color-success); }
.vnx-dash-stat__change--down { color: var(--vnx-color-danger); }
.vnx-dash-stat__change--flat { color: var(--vnx-text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════════
   §4. ACTIVITY FEED / TIMELINE
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vnx-dash-timeline__item {
  display: flex;
  gap: var(--vnx-space-4);
  padding: var(--vnx-space-3) 0;
  position: relative;
}

.vnx-dash-timeline__item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--vnx-border-light);
}

.vnx-dash-timeline__item:last-child::before {
  display: none;
}

.vnx-dash-timeline__dot {
  width: 24px;
  height: 24px;
  border-radius: var(--vnx-radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  position: relative;
  z-index: 1;
}

.vnx-dash-timeline__dot--blue   { background: var(--vnx-ocean-100); color: var(--vnx-ocean-600); }
.vnx-dash-timeline__dot--gold   { background: var(--vnx-gold-100);  color: var(--vnx-gold-700); }
.vnx-dash-timeline__dot--green  { background: var(--vnx-green-100); color: var(--vnx-green-500); }
.vnx-dash-timeline__dot--red    { background: var(--vnx-red-100);   color: var(--vnx-red-500); }

.vnx-dash-timeline__content {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--vnx-space-3);
}

.vnx-dash-timeline__title {
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-primary);
  margin: 0 0 2px;
}

.vnx-dash-timeline__title a {
  color: var(--vnx-ocean-500);
  text-decoration: none;
}

.vnx-dash-timeline__description {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-secondary);
  margin: 0 0 2px;
  line-height: var(--vnx-leading-snug);
}

.vnx-dash-timeline__time {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. QUICK ACTIONS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--vnx-space-3);
  margin-bottom: var(--vnx-space-8);
}

.vnx-dash-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vnx-space-2);
  padding: var(--vnx-space-5) var(--vnx-space-3);
  border-radius: var(--vnx-radius-xl);
  border: 1px dashed var(--vnx-border-default);
  background: var(--vnx-white);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out);
  text-align: center;
}

.vnx-dash-action:hover {
  border-color: var(--vnx-ocean-300);
  background: var(--vnx-ocean-50);
  box-shadow: var(--vnx-shadow-sm);
}

.vnx-dash-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-500);
  font-size: 22px;
}

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

.vnx-dash-action__desc {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. DASHBOARD WIDGETS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--vnx-space-5);
  margin-bottom: var(--vnx-space-8);
}

.vnx-dash-widget {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  overflow: hidden;
}

.vnx-dash-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vnx-space-4) var(--vnx-space-5);
  border-bottom: 1px solid var(--vnx-border-light);
}

.vnx-dash-widget__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0;
}

.vnx-dash-widget__action {
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-ocean-500);
  text-decoration: none;
}
.vnx-dash-widget__action:hover {
  text-decoration: underline;
}

.vnx-dash-widget__body {
  padding: var(--vnx-space-5);
}

.vnx-dash-widget__body--flush {
  padding: 0;
}

/* ── Full-width widget ── */
.vnx-dash-widget--full {
  grid-column: 1 / -1;
}

/* ── Chart container ── */
.vnx-dash-chart {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vnx-text-tertiary);
  font-size: var(--vnx-text-sm);
}

/* ── Summary list widget ── */
.vnx-dash-summary {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vnx-dash-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vnx-space-3) var(--vnx-space-5);
  border-bottom: 1px solid var(--vnx-border-light);
}

.vnx-dash-summary__item:last-child {
  border-bottom: none;
}

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

.vnx-dash-summary__value {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

/* ── Alert list ── */
.vnx-dash-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-3) var(--vnx-space-5);
  border-bottom: 1px solid var(--vnx-border-light);
  font-size: var(--vnx-text-sm);
}

.vnx-dash-alert:last-child {
  border-bottom: none;
}

.vnx-dash-alert__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.vnx-dash-alert__dot--red    { background: var(--vnx-color-danger); }
.vnx-dash-alert__dot--yellow { background: var(--vnx-color-warning); }
.vnx-dash-alert__dot--blue   { background: var(--vnx-color-info); }

.vnx-dash-alert__text {
  flex: 1;
  color: var(--vnx-text-secondary);
  line-height: var(--vnx-leading-snug);
}

.vnx-dash-alert__text a {
  color: var(--vnx-ocean-500);
  text-decoration: none;
  font-weight: var(--vnx-font-medium);
}

.vnx-dash-alert__time {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. DASHBOARD HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vnx-space-4);
  margin-bottom: var(--vnx-space-8);
}

.vnx-dash-header__greeting {
  margin: 0;
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-2xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
}

.vnx-dash-header__date {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  margin-top: var(--vnx-space-1);
}

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

/* ═══════════════════════════════════════════════════════════════════════
   §8. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-dash-empty {
  text-align: center;
  padding: var(--vnx-space-12) var(--vnx-space-6);
}

.vnx-dash-empty__icon {
  font-size: 3rem;
  margin-bottom: var(--vnx-space-4);
  opacity: 0.3;
}

.vnx-dash-empty__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-lg);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-2);
}

.vnx-dash-empty__text {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
  margin: 0 0 var(--vnx-space-5);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   §9. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .vnx-dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .vnx-dash-widgets {
    grid-template-columns: 1fr;
  }

  .vnx-dash-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .vnx-dash-header__greeting {
    font-size: var(--vnx-text-xl);
  }
}

@media (max-width: 480px) {
  .vnx-dash-stats {
    grid-template-columns: 1fr;
  }

  .vnx-dash-actions {
    grid-template-columns: 1fr 1fr;
  }
}