/*
 * Forovanta Community Software — Marketplace add-on
 * Copyright (c) 2026 Zovanta Software Co. <sales@zovanta.dev> - https://zovanta.dev
 * Licensed under the Forovanta Free License Agreement. See LICENSE for details.
 *
 * Marketplace addon stylesheet.
 *
 * Loaded only while the addon is enabled, after the board's own sheet, and it is the whole
 * of how the Marketplace's page looks: `pages.php` prints the React page's own structure —
 * the banner, the kind and category tab rows, the three summary cards, one row per listing
 * and the Community owner fee card — and every rule that draws those blocks is here.
 *
 * The values are the React page's, read off `src/index.css`'s dark palette: the same card
 * surface, the same hairline border, the same 0.75rem radius, the same muted text and the
 * same accent. A block added to one page is added to the other; a colour changed here is a
 * colour changed there.
 */

.mkt {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mkt a {
    text-decoration: none;
}

/* ---------- the banner ---------- */

.mkt-banner {
    border: 1px solid color-mix(in oklab, var(--accent, #4f5ee8) 32%, var(--border, #ffffff17));
    border-radius: 1rem;
    padding: 1.25rem;
    background:
        linear-gradient(
            color-mix(in oklab, var(--accent, #4f5ee8) 7%, transparent),
            color-mix(in oklab, var(--accent, #4f5ee8) 3%, transparent)
        ),
        var(--surface, #14161c);
}

.mkt-banner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.mkt-banner-copy {
    min-width: 0;
}

.mkt-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text, #f2f3f7);
}

.mkt-title-icon {
    font-size: 1.35rem;
    color: var(--accent, #4f5ee8);
}

.mkt-lede {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--muted, #9aa0ae);
}

.mkt-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mkt-banner-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    font-size: 0.75rem;
    color: var(--muted, #9aa0ae);
}

.mkt-banner-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mkt-ok {
    color: var(--success, #3fbf8f);
}

.mkt-badge-icon {
    font-size: 0.8rem;
    line-height: 1;
}

/* ---------- the tab rows ---------- */

.mkt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mkt-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--border, #ffffff17);
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted, #9aa0ae);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mkt-tab:hover {
    background: var(--surface-2, #22252e);
    color: var(--text, #f2f3f7);
}

.mkt-tab.is-on {
    border-color: color-mix(in oklab, var(--accent, #4f5ee8) 50%, transparent);
    background: color-mix(in oklab, var(--accent, #4f5ee8) 18%, transparent);
    color: var(--accent-soft-fg, #cdd8ff);
}

.mkt-tab-count {
    color: var(--muted, #9aa0ae);
    font-weight: 500;
}

.mkt-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.7;
}

/* ---------- the cards ---------- */

.mkt-grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.mkt-card {
    border: 1px solid var(--border, #ffffff17);
    border-radius: 0.75rem;
    background: var(--surface, #14161c);
    padding: 1rem;
}

.mkt-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mkt-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #f2f3f7);
}

.mkt-card-desc {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted, #9aa0ae);
}

.mkt-counts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mkt-count b {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text, #f2f3f7);
}

.mkt-count span {
    font-size: 0.75rem;
    color: var(--muted, #9aa0ae);
}

.mkt-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text, #f2f3f7);
}

.mkt-link:hover {
    color: var(--accent, #4f5ee8);
}

.mkt-count-pill {
    font-size: 0.75rem;
    color: var(--muted, #9aa0ae);
}

/* ---------- the listings ---------- */

.mkt-list {
    border: 1px solid var(--border, #ffffff17);
    border-radius: 0.75rem;
    background: var(--surface, #14161c);
    overflow: hidden;
}

.mkt-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: inherit;
    border-bottom: 1px solid var(--border, #ffffff17);
}

.mkt-row:last-child {
    border-bottom: none;
}

.mkt-row:hover {
    background: var(--surface-2, #22252e);
}

.mkt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background:
        linear-gradient(
            135deg,
            color-mix(in oklab, var(--accent, #4f5ee8) 30%, transparent),
            color-mix(in oklab, var(--accent, #4f5ee8) 6%, transparent)
        );
    color: var(--accent-soft-fg, #cdd8ff);
    font-size: 0.875rem;
    font-weight: 700;
}

.mkt-row-main {
    display: block;
    flex: 1;
    min-width: 0;
}

.mkt-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mkt-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text, #f2f3f7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/*
 * The kind badge, the official badge and the price: the React row's three pills, at the
 * same size and with the same three hues (`resourceTypeBadgeClass()` and the Official and
 * Free badges beside it).
 */
.mkt-kind,
.mkt-official,
.mkt-price {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mkt-kind--file {
    border-color: var(--border, #ffffff17);
    background: var(--surface-2, #22252e);
    color: var(--muted, #9aa0ae);
}

.mkt-kind--addon {
    border-color: color-mix(in oklab, var(--accent, #4f5ee8) 40%, transparent);
    background: color-mix(in oklab, var(--accent, #4f5ee8) 12%, transparent);
    color: var(--accent-soft-fg, #cdd8ff);
}

.mkt-kind--theme {
    border-color: color-mix(in oklab, #0d9488 40%, transparent);
    background: color-mix(in oklab, #0d9488 12%, transparent);
    color: #5eead4;
}

.mkt-official {
    border-color: color-mix(in oklab, var(--accent, #4f5ee8) 40%, transparent);
    background: color-mix(in oklab, var(--accent, #4f5ee8) 10%, transparent);
    color: var(--accent-soft-fg, #cdd8ff);
}

.mkt-price.is-paid {
    background: color-mix(in oklab, var(--success, #3fbf8f) 14%, transparent);
    color: var(--success, #3fbf8f);
}

.mkt-price.is-free {
    background: var(--surface-2, #22252e);
    color: var(--muted, #9aa0ae);
}

.mkt-tagline {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--muted, #9aa0ae);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-row-compat {
    display: block;
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    color: var(--muted, #9aa0ae);
    opacity: 0.85;
}

.mkt-row-side {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
    font-size: 0.6875rem;
    color: var(--muted, #9aa0ae);
    white-space: nowrap;
}

/* ---------- the empty state ---------- */

.mkt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.mkt-empty-icon {
    font-size: 2.25rem;
    color: var(--muted, #9aa0ae);
    opacity: 0.6;
}

.mkt-empty-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #f2f3f7);
}

.mkt-empty-text {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted, #9aa0ae);
}

.mkt-empty .mkt-empty-text {
    margin: 0;
    max-width: 34rem;
}

/* ---------- the owner's fee ---------- */

.mkt-facts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.mkt-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border, #ffffff17);
    border-radius: 0.5rem;
    background: var(--surface-2, #22252e);
    padding: 0.5rem 0.75rem;
}

.mkt-fact > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted, #9aa0ae);
}

.mkt-fact b {
    font-weight: 600;
    color: var(--text, #f2f3f7);
}

.mkt-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    border: 1px solid var(--border, #ffffff17);
    border-radius: 0.5rem;
    background: var(--surface-2, #22252e);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--muted, #9aa0ae);
}

.mkt-note.is-ok {
    border-color: color-mix(in oklab, var(--success, #3fbf8f) 40%, transparent);
    background: color-mix(in oklab, var(--success, #3fbf8f) 6%, transparent);
}

.mkt-note.is-warn {
    border-color: color-mix(in oklab, #f59e0b 40%, transparent);
    background: color-mix(in oklab, #f59e0b 6%, transparent);
}

.mkt-note .mkt-badge-icon {
    margin-top: 0.15rem;
    flex: none;
}

.mkt-fee {
    font-variant-numeric: tabular-nums;
}

/* The add-on's own switches, kept from the first version of this sheet. */
.fv-marketplace-banner {
    border-color: color-mix(in oklab, var(--accent, #4f5ee8) 30%, var(--border, #ffffff17));
    background: color-mix(in oklab, var(--accent, #4f5ee8) 6%, var(--surface, #14161c));
}

.fv-marketplace-kind {
    border-radius: 9999px;
    border-width: 1px;
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fv-marketplace-share {
    font-variant-numeric: tabular-nums;
}

.fv-marketplace-disabled {
    opacity: 0.7;
}

.mkt-free-dialog{max-width:min(560px,90vw);background:var(--surface,#172332);color:var(--text,#eff5ff);border:1px solid var(--border,#41536a);border-radius:14px;padding:24px}.mkt-free-dialog::backdrop{background:#0009}

/* Preserve resource icon artwork inside the compact catalogue mark. */
.mkt-avatar.res-mark--image { overflow: hidden; padding: 0; }
.mkt-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }