/* ==========================================================================
   Imports — My Imports dashboard (vp-imp-namespace)
   Reuses .vp-authgate / .vp-dash-stat / .vp-dash-toolbar / .vp-dash-empty
   from app.css, and .vp-imp-tabs / .vp-imp-tab from imports-browse.css.
   Only the case-card + list rows below are new. No new colour tokens.
   ========================================================================== */

.vp-imp-my-page { padding-top: 24px; padding-bottom: 60px; }

.vp-imp-my-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}

.vp-imp-my-page .vp-dash-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 24px 0;
}

/* ── Active case cards ─────────────────────────────────────────────────── */
.vp-imp-case-list { display: flex; flex-direction: column; gap: 12px; }

.vp-imp-case-card {
    display: block; background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 18px 20px; text-decoration: none;
    transition: border-color 0.2s var(--vp-ease);
}
.vp-imp-case-card:hover { border-color: var(--vp-line-strong); }

.vp-imp-case-card__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.vp-imp-case-card__title {
    font-family: var(--vp-font-display); font-size: 18px; font-weight: 600;
    color: var(--vp-white); margin: 0 0 4px;
}
.vp-imp-case-card__meta {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--vp-font-mono); font-size: 11px; color: var(--vp-text-dim);
}
.vp-imp-case-card__meta .vp-imp-case-card__ref { color: var(--vp-text); }
.vp-imp-case-card__meta .dot {
    width: 3px; height: 3px; border-radius: 50%; background: var(--vp-text-faint);
}
.vp-imp-case-card__chevron { color: var(--vp-text-faint); flex-shrink: 0; margin-top: 4px; }

/* Mini voyage strip — same grammar as the add-listing wizard's progress rail */
.vp-imp-case-voyage__head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.vp-imp-case-voyage__stage {
    font-family: var(--vp-font-mono); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--vp-text);
}
.vp-imp-case-voyage__step {
    font-family: var(--vp-font-mono); font-size: 9px; color: var(--vp-text-faint);
}
.vp-imp-case-voyage__track {
    position: relative; height: 3px; border-radius: 2px;
    background: var(--vp-line); overflow: hidden;
}
.vp-imp-case-voyage__fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--vp-white); border-radius: 2px;
}

/* ── Watchlist rows ────────────────────────────────────────────────────── */
.vp-imp-watch-list { display: flex; flex-direction: column; gap: 10px; }

.vp-imp-watch-row {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 14px 16px;
    transition: border-color 0.2s var(--vp-ease);
}
.vp-imp-watch-row:hover { border-color: var(--vp-line-strong); }

.vp-imp-watch-row__thumb {
    width: 48px; height: 48px; border-radius: 3px; background: var(--vp-surface-raised);
    display: flex; align-items: center; justify-content: center;
    color: var(--vp-text-faint); flex-shrink: 0;
}
.vp-imp-watch-row__body { flex: 1; min-width: 0; }
.vp-imp-watch-row__title {
    font-family: var(--vp-font-body); font-size: 13.5px; font-weight: 600;
    color: var(--vp-text); margin: 0 0 4px;
}
.vp-imp-watch-row__status {
    font-family: var(--vp-font-mono); font-size: 9px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--vp-text-faint);
    display: inline-flex; align-items: center; gap: 5px;
}
.vp-imp-watch-row__status .dot {
    width: 5px; height: 5px; border-radius: 50%; background: var(--vp-text-faint);
}
.vp-imp-watch-row__eta { color: var(--vp-text-faint); margin-left: 6px; }
.vp-imp-watch-row__right { text-align: right; flex-shrink: 0; }
.vp-imp-watch-row__price {
    font-family: var(--vp-font-mono); font-size: 13px; color: var(--vp-text);
}
.vp-imp-watch-row__stock {
    font-family: var(--vp-font-mono); font-size: 9px; color: var(--vp-text-faint);
}

/* ── Completed rows ────────────────────────────────────────────────────── */
.vp-imp-completed-list { display: flex; flex-direction: column; gap: 10px; }

.vp-imp-completed-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 14px 16px;
}
.vp-imp-completed-row__icon {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vp-line-strong);
    display: flex; align-items: center; justify-content: center;
    color: var(--vp-text); flex-shrink: 0;
}
.vp-imp-completed-row__body { flex: 1; min-width: 0; }
.vp-imp-completed-row__title {
    font-family: var(--vp-font-body); font-size: 13px; font-weight: 600;
    color: var(--vp-text); margin: 0;
}
.vp-imp-completed-row__ref {
    font-family: var(--vp-font-mono); font-size: 10px; color: var(--vp-text-faint);
}
.vp-imp-completed-row__price {
    font-family: var(--vp-font-mono); font-size: 12px; color: var(--vp-text-dim); flex-shrink: 0;
}

@media (max-width: 640px) {
    .vp-imp-my-header { flex-direction: column; }
    .vp-imp-my-page .vp-dash-toolbar { flex-direction: column; align-items: stretch; }
    .vp-imp-tabs { justify-content: space-between; }
}