@import './default.css';

/* ── Exports list view ───────────────────────────────────────────── */

.exports-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 900px;
}

.exports-view__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.exports-view__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--textColor);
}

.exports-view__user-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--textMuted);
  white-space: nowrap;
}

.exports-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.exports-list__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--borderColor);
  background: var(--bgSurface);
  text-decoration: none;
  color: var(--textColor);
  transition: background 0.1s;
}

.exports-list__primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.exports-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.exports-list__row:hover {
  background: var(--bgSurfaceHover);
}

.exports-list__row--expired {
  opacity: 0.55;
}

.exports-list__type {
  font-weight: 600;
  font-size: var(--text-sm);
}

.exports-list__date {
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.exports-list__creator {
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.exports-list__expiry {
  font-size: var(--text-sm);
  color: var(--textMuted);
  margin-left: auto;
}

.exports-list__expiry--expired {
  color: var(--dangerColor);
}

/* ── Status chips ────────────────────────────────────────────────── */

.export-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.55em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  width: fit-content;
}

.export-status--pending {
  background: var(--warningBg);
  color: var(--warningText);
}

.export-status--processing {
  background: var(--accentBg);
  color: var(--accentText);
}

.export-status--ready {
  background: var(--successBg);
  color: var(--successText);
}

.export-status--failed {
  background: var(--dangerBg);
  color: var(--dangerText);
}

/* ── Export detail view ──────────────────────────────────────────── */

.export-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
}

.export-detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.export-detail__back {
  font-size: var(--text-sm);
  color: var(--textMuted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.export-detail__back:hover {
  color: var(--textColor);
}

.export-detail__header-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.export-detail__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  color: var(--textColor);
}

.export-detail__report-link {
  font-size: var(--text-sm);
  color: var(--textMuted);
  text-decoration: none;
  white-space: nowrap;
}

.export-detail__report-link:hover {
  color: var(--textColor);
}

.export-detail__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--bgSurface);
}

.export-detail__row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.export-detail__label {
  width: 10rem;
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.export-detail__value {
  font-size: var(--text-sm);
  color: var(--textColor);
}

.export-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.export-detail__primary-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.export-detail__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--bgSurface);
}

.export-detail__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--textColor);
  margin: 0;
}

.export-detail__expiry-note {
  font-size: var(--text-sm);
  color: var(--textMuted);
  margin: 0;
}

.export-detail__expiry-controls {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ── Running exports widget (report page) ────────────────────────── */

.running-exports {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.running-exports__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--accentBg);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--accentText);
  font-size: var(--text-sm);
  border: 1px solid var(--borderColor);
  transition: filter 0.1s;
}

.running-exports__item:hover {
  filter: brightness(0.96);
}

.running-exports__type {
  font-weight: 600;
}

.running-exports__status {
  margin-left: auto;
  opacity: 0.75;
}

/* ── Report page export notice ───────────────────────────────────── */

.report-export__notice {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--successBg);
  color: var(--successText);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.report-export__notice-link {
  color: var(--successText);
  font-weight: 600;
}