/**
 * Forovanta Community Software
 * Copyright (c) 2026 Zovanta Software Co. <sales@zovanta.dev> - https://zovanta.dev
 * Licensed under the Forovanta Free License Agreement. See LICENSE for details.
 *
 * Creator submissions addon stylesheet.
 *
 * Loaded only while the addon is enabled. The creator workspace itself lives in
 * the forum core and is switched on by this package.
 *
 * Every rule below draws the reference build's **Creator submissions** page
 * (`src/pages/forum/CreatorSubmissions.tsx`): the four stat tiles, the divided
 * list of a member's own listings, the pre-flight checklist, and the earnings
 * card with its area tabs, its five boxes and the by-area breakdown. The classes
 * are named `fv-creator-*` and each one is the block it draws, so a change to one
 * page is a change to both.
 *
 * The colours are written `var(--text, var(--fv-text, #18181b))` — the board's own
 * token first, then the port's, then a plain fallback — so the same sheet works on
 * both front ends. Nothing here assumes the board is dark: every value is either a
 * token or a `color-mix()` of one.
 */

/* ------------------------------------------------------------- the page head */

.fv-creator-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fv-space-3, 0.75rem);
}

.fv-creator-head h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fv-creator-head h1 .fv-icon,
.fv-creator-head h1 i {
  color: var(--accent, var(--fv-accent, #0069ca));
}

/* ------------------------------------------------------------- statistic tiles */

.fv-creator-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .fv-creator-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fv-creator-stat {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.fv-creator-stat.is-ok { color: var(--success, var(--fv-success, #059669)); }
.fv-creator-stat.is-warn { color: #d97706; }
.fv-creator-stat.is-bad { color: var(--danger, var(--fv-danger, #dc2626)); }

.fv-creator-stat-label {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--muted, var(--fv-text-muted, #71717a));
}

/* --------------------------------------------------------------- the columns */

.fv-creator-cols {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .fv-creator-cols { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.fv-creator-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* --------------------------------------------------------- my submissions rows */

.fv-creator-list { display: flex; flex-direction: column; }

.fv-creator-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border, var(--fv-border, #e4e4e7));
}

.fv-creator-row:first-child { border-top: 0; padding-top: 0; }

.fv-creator-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.fv-creator-row-title { font-size: 0.875rem; font-weight: 600; }
.fv-creator-row-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted, var(--fv-text-muted, #71717a));
}
.fv-creator-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fv-creator-row-note {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--danger, var(--fv-danger, #dc2626)) 40%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--danger, var(--fv-danger, #dc2626)) 5%, transparent);
  font-size: 0.75rem;
  color: var(--muted, var(--fv-text-muted, #71717a));
}
.fv-creator-row-note b { color: var(--danger, var(--fv-danger, #dc2626)); }

/* ------------------------------------------------------------------- badges */

.fv-creator-badge,
.fv-creator-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--border, var(--fv-border, #e4e4e7));
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, var(--fv-text-muted, #71717a));
}

.fv-creator-status.is-ok {
  border-color: color-mix(in srgb, #059669 40%, transparent);
  background: color-mix(in srgb, #059669 10%, transparent);
  color: #059669;
}
.fv-creator-status.is-warn {
  border-color: color-mix(in srgb, #d97706 40%, transparent);
  background: color-mix(in srgb, #d97706 10%, transparent);
  color: #d97706;
}
.fv-creator-status.is-bad {
  border-color: color-mix(in srgb, var(--danger, var(--fv-danger, #dc2626)) 40%, transparent);
  background: color-mix(in srgb, var(--danger, var(--fv-danger, #dc2626)) 10%, transparent);
  color: var(--danger, var(--fv-danger, #dc2626));
}

/* The artwork line beside a listing's badges: a tick or a warning, never both. */
.fv-creator-art {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
}
.fv-creator-art.is-ok { color: #059669; }
.fv-creator-art.is-warn { color: #d97706; }

/* ---------------------------------------------------------------- checklists */

.fv-creator-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.fv-creator-check + .fv-creator-check { margin-top: 0.625rem; }

.fv-creator-check-ok {
  color: color-mix(in oklab, #059669 85%, var(--foreground, #18181b));
}

.fv-creator-check-warn {
  color: color-mix(in oklab, #b45309 85%, var(--foreground, #18181b));
}

.fv-creator-check b { color: var(--text, var(--fv-text, #18181b)); font-weight: 600; }
.fv-creator-check span { display: block; margin-top: 0.125rem; }

.fv-creator-check-icon { margin-top: 0.1rem; flex-shrink: 0; }

/* ----------------------------------------------------------------- earnings */

.fv-creator-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }

.fv-creator-tab {
  border: 1px solid var(--border, var(--fv-border, #e4e4e7));
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text, var(--fv-text, #18181b));
  background: transparent;
}
.fv-creator-tab:hover { background: var(--surface-2, var(--fv-surface-2, #f4f4f5)); text-decoration: none; }
.fv-creator-tab.is-on {
  border-color: color-mix(in srgb, var(--accent, var(--fv-accent, #0069ca)) 50%, transparent);
  background: var(--accent-soft, var(--fv-accent-soft, #e6f0fa));
  color: var(--accent-soft-fg, var(--fv-accent-soft-fg, #00519b));
}

.fv-creator-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.fv-creator-box {
  border: 1px solid var(--border, var(--fv-border, #e4e4e7));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2, var(--fv-surface-2, #f4f4f5)) 40%, transparent);
  padding: 0.5rem 0.75rem;
}
.fv-creator-box-label { margin: 0; font-size: 0.75rem; color: var(--muted, var(--fv-text-muted, #71717a)); }
.fv-creator-box-value {
  margin: 0.15rem 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fv-creator-sep {
  border-top: 1px solid var(--border, var(--fv-border, #e4e4e7));
  padding-top: 0.75rem;
}

.fv-creator-section-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, var(--fv-text-muted, #71717a));
}

.fv-creator-books { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fv-creator-books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fv-creator-book {
  border: 1px solid var(--border, var(--fv-border, #e4e4e7));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2, var(--fv-surface-2, #f4f4f5)) 25%, transparent);
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--muted, var(--fv-text-muted, #71717a));
}
.fv-creator-book p { margin: 0.1rem 0 0; }
.fv-creator-book b { color: var(--text, var(--fv-text, #18181b)); }

.fv-creator-payout {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted, var(--fv-text-muted, #71717a));
}