/*
 * F! Market — Vendor Dashboard CSS
 *
 * Front-end vendor dashboard. Shared color/radius/shadow/spacing tokens now
 * live in fo-tokens.css (enqueued as this stylesheet's dependency — see
 * core/class-fo-assets.php) so this file and fo-profile.css/fo-admin.css
 * can't drift out of sync with each other the way they had before
 * 2026-07-11. Only the dashboard's own context-specific accent override
 * stays here.
 *
 * @package FrickingMarket
 * @since   1.0.2
 */

/* ─── Tokens (scoped to dashboard wrap) ─────────────────────────────── */
.fo-dashboard-wrap {
    /* Admin's explicit choice, else best-effort detected from the active
       theme, else the same #1d4ed8/#1e40af default fo-tokens.css's
       --fo-primary/--fo-primary-hover use — can't reference those as this
       fallback's fallback (a custom property can't safely self-reference
       its own inherited value as a var() fallback), so this literal is
       kept in sync with fo-tokens.css by hand. If you change one, change
       both. See :root{--fo-accent} injected by
       FO_Assets::enqueue_frontend() and fo_dashboard_accent_color() in
       helpers/fo-functions.php. */
    --fo-primary:       var(--fo-accent, #1d4ed8);
    --fo-primary-hover: var(--fo-accent, #1e40af);
    --content-size:     100% !important; /* override block theme constraint */
    font-family:        inherit;
    max-width:          none !important;
    width:              100%;
}

/* ─── Nav row — tab list plus persistent right-aligned View Profile link ──
   Fixed 2026-07-14: with 11 nav tabs, this row can run out of horizontal
   room before the tab strip gets a chance to wrap its own items — a flex
   item's default min-width is "auto" (its own content's intrinsic width),
   not 0, so without min-width:0 below, .fo-dashboard-nav could refuse to
   shrink and instead push the View Profile button onto its own line. Worse,
   once it wrapped alone onto that line, justify-content:space-between has
   nothing to "space between" with only one item on that line, so the spec
   falls back to flex-start — the button silently jumped from right-aligned
   to left-aligned, landing flush under the first tab (looked like it was
   "bordering" the tabs). margin-left:auto replaces that dependency on
   space-between: it pushes the button to the end of whichever line it's on
   even when it's the only item there, so it stays right-aligned whether or
   not it wraps. */
.fo-dashboard-nav-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.fo-dashboard-nav-row .fo-dashboard-nav {
    flex: 1 1 auto;
    min-width: 0; /* let the tab strip shrink/wrap its own tabs first — see comment above */
}
.fo-view-profile-btn {
    flex: 0 0 auto;
    margin: 8px 0 8px auto; /* auto left-margin keeps it right-aligned on its own line if it wraps; top margin gives it breathing room from the tabs above instead of sitting flush against them */
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fo-primary);
    background: var(--fo-surface);
    border: 1px solid var(--fo-border-strong);
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
}
.fo-view-profile-btn:hover {
    color: var(--fo-primary-hover, var(--fo-primary));
    border-color: var(--fo-primary);
}

/* ─── Nav — mirrors F! Insights tab chrome ───────────────────────────── */
.fo-dashboard-nav {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--fo-border-strong);
    flex-wrap: wrap;
}
.fo-dashboard-nav a {
    padding: 10px 18px;
    font-size: 14px;
    color: var(--fo-body);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s;
}
.fo-dashboard-nav a:hover { color: var(--fo-primary); }
.fo-dashboard-nav a.is-active {
    background: var(--fo-surface);
    border-color: var(--fo-border-strong);
    color: var(--fo-primary);
    font-weight: 600;
}
/* Unread badge — same pattern as F! Insights hot badge */
.fo-nav-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--fo-danger);
    border-radius: 20px;
}

/* ─── Tab content panel ──────────────────────────────────────────────── */
.fo-tab-panel {
    background: var(--fo-surface);
    border: 1px solid var(--fo-border-strong);
    border-top: none;
    padding: 28px 32px;
    border-radius: 0 0 4px 4px;
}

/* ─── Notices ────────────────────────────────────────────────────────── */
/* BEM added 2026-07-11: this same "colored left-border banner" shape was
   built three separate times in this one file alone under three different
   base class names (.fo-notice, .fo-form-notice, .fo-apply-notice), each
   with its own hyphenation for the color variant (-success vs --success
   elsewhere in the plugin). .fo-notice/.fo-notice--* is now the one
   canonical block+modifier pair; the other two base classes are kept as
   working aliases below so existing markup doesn't need to change yet. */
.fo-notice,
.fo-form-notice,
.fo-apply-notice {
    padding: 12px 16px;
    border-radius: var(--fo-radius);
    font-size: 13px;
    margin-bottom: 20px;
    border-left: 4px solid transparent;
}
.fo-notice-success,
.fo-notice--success,
.fo-apply-success { background: var(--fo-success-bg); border-color: var(--fo-success); color: var(--fo-success-text); }
.fo-notice-error,
.fo-notice--error,
.fo-apply-error   { background: var(--fo-danger-bg);  border-color: var(--fo-danger);  color: var(--fo-danger-text);  }
.fo-notice-warning,
.fo-notice--warning { background: var(--fo-warning-bg); border-color: var(--fo-warning); color: var(--fo-warning-text); }

/* ─── Cards — shared surface, matches fo-admin.css's .fo-card ───────────
   BEM added 2026-07-11: .fo-stat-card, .fo-publish-box, .fo-image-box, and
   .fo-payout-request-box (further down this file) are all the same
   "bordered surface box" shape with their own extra layout rules on top
   (flex sizing, gap, etc.) — that shared shape is now .fo-card, written
   once, so future boxes reach for it instead of repeating the same
   background/border/radius block a fifth time. */
.fo-card,
.fo-stat-card,
.fo-publish-box,
.fo-image-box,
.fo-payout-request-box {
    background: var(--fo-surface);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-lg);
}
.fo-stat-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.fo-stat-card {
    flex: 1 1 160px;
    padding: 16px 20px;
}
.fo-stat-value { font-size: 28px; font-weight: 700; color: var(--fo-text); line-height: 1; }
.fo-stat-of    { font-size: 18px; font-weight: 400; color: var(--fo-muted); }
.fo-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--fo-muted); margin-top: 4px; }

/* ─── Tables ─────────────────────────────────────────────────────────── */
/* BEM added 2026-07-11: these four table types had byte-for-byte identical
   rules, just with four different selector lists copy-pasted for each one.
   .fo-table is now the one real class (matching fo-admin.css's own table
   class, so the two contexts finally share one name for the same thing);
   the four type-specific classes are kept as aliases so existing markup
   keeps working. Any newly written or reconfigured table should just use
   fo-table directly instead of inventing a fifth type-specific name. */
.fo-table,
.fo-products-table,
.fo-orders-table,
.fo-earnings-table,
.fo-payouts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--fo-surface);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-lg);
    overflow: hidden;
}
.fo-table th,
.fo-products-table th,
.fo-orders-table th,
.fo-earnings-table th,
.fo-payouts-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fo-muted);
    background: var(--fo-bg);
    border-bottom: 1px solid var(--fo-border);
}
.fo-table td,
.fo-products-table td,
.fo-orders-table td,
.fo-earnings-table td,
.fo-payouts-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fo-bg-inset) !important;
    color: var(--fo-body);
    vertical-align: middle;
}
.fo-table tr:last-child td,
.fo-products-table tr:last-child td,
.fo-orders-table tr:last-child td,
.fo-earnings-table tr:last-child td,
.fo-payouts-table tr:last-child td { border-bottom: none !important; }
.fo-table tr:hover td,
.fo-products-table tr:hover td,
.fo-orders-table tr:hover td { background: var(--fo-bg); }

/* ─── Products header ────────────────────────────────────────────────── */
.fo-products-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.fo-slot-indicator { font-size: 12px; color: var(--fo-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fo-limit-reached  { font-size: 13px; color: var(--fo-danger); }

/* Sold badge — BEM added 2026-07-11: same small colored pill shape as
   fo-admin.css's .fo-status-* and fo-profile.css's .fo-badge-*. .fo-badge
   is the shared base; .fo-badge--neutral is this file's own color variant
   (the others are semantic success/warning/danger, this one is
   deliberately neutral gray — sold isn't a status, just a fact). */
.fo-badge,
.fo-sold-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--fo-radius-pill);
}
.fo-badge--neutral,
.fo-sold-badge {
    color: #fff;
    background: var(--fo-muted);
    margin-left: 6px;
}
.fo-product-sold td { opacity: .65; }

/* Product image in table. Scoped with the .fo-dashboard-wrap ancestor
   prefix (2026-07-11) so this has strictly higher specificity than the
   .fo-dashboard-wrap img cross-theme reset further down this file — before
   this fix both rules had identical specificity (one class + one type),
   so whichever was declared later in the file silently won regardless of
   intent, and the reset happened to come later, meaning these table
   thumbnails were rendering at native aspect ratio (height:auto) instead
   of a uniform 50x50 crop. */
.fo-dashboard-wrap .fo-table img,
.fo-dashboard-wrap .fo-products-table img { width: 50px !important; height: 50px !important; max-width: 50px !important; object-fit: cover !important; border-radius: 4px; }

/* ─── Product edit form ──────────────────────────────────────────────── */
.fo-form-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 768px) { .fo-form-grid { grid-template-columns: 1fr; } }

.fo-field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fo-field-group label { font-size: 13px; font-weight: 600; color: var(--fo-body); }
.fo-field-group input[type="text"],
.fo-field-group input[type="number"],
.fo-field-group input[type="url"],
.fo-field-group input[type="email"],
.fo-field-group input[type="password"],
.fo-field-group select,
.fo-field-group textarea {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid var(--fo-input-border) !important;
    border-radius: var(--fo-radius) !important;
    font-size: 14px !important;
    color: var(--fo-text) !important;
    background: var(--fo-surface) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}
.fo-field-group input:focus,
.fo-field-group select:focus,
.fo-field-group textarea:focus {
    outline: none !important;
    border-color: var(--fo-info) !important;
    box-shadow: 0 0 0 3px var(--fo-focus-ring) !important;
}
.fo-required { color: var(--fo-danger); }

.fo-field-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fo-field-row .fo-field-group { flex: 1; min-width: 120px; margin-bottom: 0; }
.fo-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.fo-radio-group label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }

.fo-art-details,
.fo-pricing {
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-lg);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.fo-art-details legend,
.fo-pricing legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--fo-text); }

.fo-checkbox-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fo-checkbox-list label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

.fo-commission-note { margin-top: 6px; font-size: 12px; color: var(--fo-muted); }

/* Sidebar boxes — surface/border/radius come from the shared .fo-card
   group above; only this pair's own padding/spacing lives here. */
.fo-publish-box,
.fo-image-box {
    padding: 18px;
    margin-bottom: 16px;
}
.fo-slots { font-size: 12px; color: var(--fo-muted); margin-bottom: 12px; }
.fo-image-box strong { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--fo-text); }
.fo-image-placeholder {
    width: 100%; height: 160px;
    background: var(--fo-bg);
    border: 1px dashed var(--fo-border);
    border-radius: var(--fo-radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--fo-muted); font-size: 13px; margin-bottom: 10px;
}
/* Fixed 2026-07-11: this had no height/object-fit, so the preview's height
   swung with whatever aspect ratio the vendor's photo happened to be
   (very tall for a portrait shot, very short for a landscape one) instead
   of matching the fixed 160px box .fo-image-placeholder uses right above
   it for the empty state — the "Product Image" thumbnail looked different
   in shape every time. Now matches that same 160px box and crops to fill
   it, same as every other thumbnail in the plugin (.fo-work-image,
   .fo-gallery-thumb img, etc. all already use object-fit: cover). */
#fo-product-image-preview img {
	width:         100% !important;
	height:        160px !important; /* !important: .fo-dashboard-wrap img below forces height:auto for theme resets, would otherwise clobber this */
	object-fit:    cover !important;
	border-radius: var(--fo-radius);
	margin-bottom: 10px;
	display:       block;
}

/* ─── Earnings summary ───────────────────────────────────────────────── */
.fo-earnings-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.fo-earnings-summary .fo-stat-card { flex: 1; min-width: 160px; }

/* ─── Payouts ────────────────────────────────────────────────────────── */
/* Surface/border/radius come from the shared .fo-card group above. */
.fo-payout-request-box {
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.fo-balance-display { display: flex; flex-direction: column; gap: 4px; }
.fo-balance-amount  { font-size: 32px; font-weight: 700; color: var(--fo-text); }
.fo-balance-label   { font-size: 12px; color: var(--fo-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fo-payout-blocker  { font-size: 13px; color: var(--fo-muted); margin: 0; }

/* ─── Settings ───────────────────────────────────────────────────────── */
.fo-settings-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.fo-settings-table th { width: 200px; text-align: left; font-size: 13px; font-weight: 600; color: var(--fo-body); padding-right: 20px; vertical-align: top; padding-top: 10px; }
.fo-settings-table td input[type="text"],
.fo-settings-table td input[type="url"],
.fo-settings-table td input[type="email"],
.fo-settings-table td textarea {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--fo-input-border);
    border-radius: var(--fo-radius);
    background: var(--fo-surface);
}

/* ─── Messages ───────────────────────────────────────────────────────── */
.fo-thread-list { display: flex; flex-direction: column; gap: 2px; }
.fo-thread-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fo-surface);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    text-decoration: none;
    color: var(--fo-text);
    transition: background .1s;
}
.fo-thread-item:hover { background: var(--fo-bg); }
.fo-thread-item.is-unread { font-weight: 600; border-left: 3px solid var(--fo-primary); }
.fo-thread-subject { font-size: 14px; }
.fo-thread-meta    { font-size: 12px; color: var(--fo-muted); }

/* ─── Modal ──────────────────────────────────────────────────────────── */
.fo-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fo-modal[hidden] { display: none; }
.fo-modal-inner {
    position: relative;
    background: var(--fo-surface);
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow-lg);
    padding: 32px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}
.fo-modal-close { position: absolute; top: 16px; right: 16px; background: none !important; border: none !important; font-size: 20px; cursor: pointer; color: var(--fo-muted); padding: 4px 8px; line-height: 1; }
.fo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.fo-modal-overlay[hidden] { display: none; }
body.fo-modal-open { overflow: hidden; }

.fo-message-form .fo-form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.fo-message-form label { font-size: 13px; font-weight: 600; color: var(--fo-text); }
.fo-message-form input,
.fo-message-form textarea {
    padding: 8px 12px !important;
    border: 1px solid var(--fo-input-border) !important;
    border-radius: var(--fo-radius) !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* .fo-form-notice's own shape/colors are now defined once, above, grouped
   with .fo-notice/.fo-apply-notice — see the BEM note there. */

/* ─── Gate messages ──────────────────────────────────────────────────── */
.fo-dashboard-gate { padding: 40px 24px; text-align: center; font-size: 15px; color: var(--fo-muted); }

/* ─── Apply form ─────────────────────────────────────────────────────── */
/* .fo-apply-form's actual max-width (1080px) is set in the view's own
   inline <style> block (views/vendor/fo-view-apply.php) — this file used
   to carry a second, conflicting 680px rule for the same class that had
   no effect (shadowed by the view's rule) but was confusing dead code.
   Removed 2026-07-14. */
/* .fo-apply-notice/.fo-apply-success/.fo-apply-error's shape/colors are
   now defined once, above, grouped with .fo-notice — see the BEM note
   there. */

/* ─── Cross-theme resets (Divi, Elementor, Astra, GP, OceanWP) ───────── */
.fo-dashboard-nav a { transform: none !important; }
.fo-dashboard-nav a:hover { transform: none !important; }
.fo-dashboard-wrap .fo-table td,
.fo-dashboard-wrap .fo-products-table td,
.fo-dashboard-wrap .fo-orders-table td,
.fo-dashboard-wrap .fo-earnings-table td,
.fo-dashboard-wrap .fo-payouts-table td { border: none !important; border-bottom: 1px solid var(--fo-bg-inset) !important; }
.fo-dashboard-wrap img { height: auto !important; }

/* Thumbnail preview containers (2026-07-11) — every one of these renders an
   <img> with an inline height:100% (or a fixed px height) so it fills a
   fixed-size square/circle box uniformly. The .fo-dashboard-wrap img reset
   directly above has equal specificity to a bare class selector and is
   !important, so it silently wins over a non-!important inline style and
   forces height:auto on all of them — Additional Photos thumbnails, the
   Studio media picker, the Visual Narrative picker, and the round Profile
   Photo preview all rendered at each image's native aspect ratio instead
   of a uniform crop. Two-class selectors here have strictly higher
   specificity than the one-class reset, so they win regardless of source
   order. */
.fo-dashboard-wrap .fo-gallery-thumb img,
.fo-dashboard-wrap .fo-studio-media-item img,
.fo-dashboard-wrap .fo-narrative-item img {
	height:     100% !important;
	object-fit: cover !important;
}
#fo-profile-photo-preview img {
	height:     80px !important;
	object-fit: cover !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fo-stat-grid { flex-direction: column; }
    .fo-tab-panel { padding: 20px 16px; }
    .fo-payout-request-box { flex-direction: column; align-items: flex-start; }
}

/* ─── Buttons (2026-07-11) ───────────────────────────────────────────────
   Every dashboard view already writes WP-admin's own class names —
   .button / .button-primary / .button-secondary / .button-small — on its
   buttons and button-styled links/labels. That's WordPress's real button
   CSS in wp-admin, but this whole dashboard renders on the public front
   end, where that stylesheet never loads. Every one of those buttons was
   therefore rendering with zero styling: bare browser-default button
   chrome (Save Work, Upload Image, Or choose from library, Add New Work,
   bulk-action Apply/Clear, table row actions, message/reply/payout
   buttons — all of it, across every tab, not just the ones caught in a
   screenshot). Fixed once here, using the same class names already in
   the markup, rather than rewriting every view's HTML to some new class.
   No hardcoded font-size — buttons inherit the theme's cascaded text
   size, only structural chrome (padding/radius/color/border) is set. */
/* BEM added 2026-07-11: .fo-btn/.fo-btn--* is now the canonical name
   (matches fo-admin.css's own .fo-btn/.fo-btn--danger convention); the
   WP-admin-style .button/.button-primary/.button-secondary/.button-small
   names already written across every dashboard view are kept as working
   aliases below. Reach for .fo-btn on anything new or reconfigured. */
.fo-dashboard-wrap .button,
.fo-dashboard-wrap .fo-btn,
.fo-dashboard-wrap a.button,
.fo-dashboard-wrap label.button {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    background: var(--fo-surface);
    color: var(--fo-body);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fo-dashboard-wrap .button:hover,
.fo-dashboard-wrap .fo-btn:hover {
    background: var(--fo-bg-inset);
    border-color: var(--fo-subtle);
    color: var(--fo-text);
}
.fo-dashboard-wrap .button-primary,
.fo-dashboard-wrap .fo-btn--primary {
    background: var(--fo-primary);
    border-color: var(--fo-primary);
    color: #fff;
}
.fo-dashboard-wrap .button-primary:hover,
.fo-dashboard-wrap .fo-btn--primary:hover {
    background: var(--fo-primary-hover);
    border-color: var(--fo-primary-hover);
    color: #fff;
}
.fo-dashboard-wrap .button-secondary,
.fo-dashboard-wrap .fo-btn--secondary {
    background: var(--fo-surface);
    border-color: var(--fo-border-strong);
    color: var(--fo-body);
}
.fo-dashboard-wrap .fo-btn--danger {
    background: var(--fo-danger);
    border-color: var(--fo-danger);
    color: #fff;
}
.fo-dashboard-wrap .fo-btn--danger:hover {
    background: var(--fo-danger-text);
    border-color: var(--fo-danger-text);
    color: #fff;
}
.fo-dashboard-wrap .button-small,
.fo-dashboard-wrap .fo-btn--small { padding: 5px 12px; }
.fo-dashboard-wrap .button:disabled,
.fo-dashboard-wrap .button[disabled],
.fo-dashboard-wrap .fo-btn:disabled,
.fo-dashboard-wrap .fo-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Product-edit sidebar's status <select> (Save as Draft / Publish) sits in
   .fo-publish-box, not .fo-field-group, so it never picked up that
   group's input styling above — rendered as a bare native dropdown. */
.fo-publish-box select {
    padding: 8px 12px;
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    font-family: inherit;
    color: var(--fo-text);
    background: var(--fo-surface);
    box-sizing: border-box;
}
.fo-publish-box select:focus {
    outline: none;
    border-color: var(--fo-primary);
    box-shadow: 0 0 0 3px var(--fo-focus-ring);
}

/* ─── Settings tab: accent buttons/links + auto-save confirmation ──────
   Accent color follows fo_dashboard_accent_color() (admin's explicit
   choice, else detected from the active theme, else the original
   hardcoded blue) via the --fo-primary token above. Replaces one-off
   inline #1d4ed8 styling in views/dashboard/fo-view-dashboard-settings.php. */
.fo-accent-btn {
    display: inline-block;
    padding: 9px 18px;
    background: var(--fo-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--fo-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.fo-accent-btn:hover { filter: brightness(0.9); color: #fff; }
.fo-accent-link { color: var(--fo-primary); }
.fo-accent-circle {
    background: var(--fo-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty required field, flagged after a failed submit (mirrors the
   vendor-apply wizard's own .fo-field-invalid). */
.fo-field-invalid { border-color: var(--fo-danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }

/* Auto-save confirmation — a field/control briefly flashes a green border
   when a change is confirmed saved. Same idea as F! Insights' CRM
   lead-pipeline row flash, adapted to individual fields since this page
   has no table rows. Class is added then removed by JS after ~1.1s. */
@keyframes fo-save-flash-border {
    0%   { border-color: var(--fo-success); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
    100% { border-color: var(--fo-border); box-shadow: none; }
}
.fo-field-saved { animation: fo-save-flash-border 1.1s ease-out; }