/* ──────────────────────────────────────────────────────
   Utility + one-off classes — extracted from inline
   style="" attrs across index/admin/supplier HTML in
   Sprint 2b (UX-001). Types:
     .u-*      = utility classes (use sparingly)
     .<scoped> = component modifiers for non-reusable fixes
   Tokens from marketplace-v2.css are available here.
   ────────────────────────────────────────────────────── */

/* ── Display / visibility ─────────────────────────── */
.u-hidden { display: none !important; }

/* ── Layout / sizing ──────────────────────────────── */
.u-w-full { width: 100%; box-sizing: border-box; }
.u-flex-1 { flex: 1; }
.u-flex-row-8 { display: flex; gap: 8px; align-items: center; }
.u-flex-row-6 { display: flex; gap: 6px; align-items: center; }
.u-grid-span-all { grid-column: 1 / -1; }
.u-nowrap { white-space: nowrap; }

/* ── Spacing resets ───────────────────────────────── */
.u-m-0 { margin: 0; }
.u-mb-8 { margin-bottom: 8px; }

/* ── Typography / alignment ──────────────────────── */
.u-text-right { text-align: right; }

/* ──────────────────────────────────────────────────
   Component-specific modifier classes
   ────────────────────────────────────────────────── */

/* Supplier header compact secondary buttons (Marketplace link, Ieșire). */
.sp-header-user__btn-compact { padding: 6px 14px; font-size: 12px; }

/* Storefront cart "Plasează comanda" link-styled button. */
.order-btn--link { display: block; text-align: center; text-decoration: none; }

/* Storefront CUI verified badge (green pill next to company name). */
.cui-verified-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
/* UX-004: tone variants for CUI verified badge (replace inline style assignments) */
.cui-verified-badge.is-verified { color: var(--ok-text); background: var(--badge-success-bg); }
.cui-verified-badge.is-unverified { color: var(--warn-text); background: var(--badge-warning-bg); }

/* Storefront CUI input + lookup button layout. */
.cui-lookup-input { flex: 1; font-size: 15px; padding: 11px 14px; }
.cui-lookup-btn { white-space: nowrap; padding: 11px 18px; font-size: 13px; }
.cui-lookup-status { font-size: 12px; margin-top: 6px; min-height: 18px; line-height: 1.4; color: var(--ink-mute); }
/* UX-004: status-tone variants (replace inline style.color assignments) */
.cui-lookup-status.is-loading { color: var(--ink-mute); }
.cui-lookup-status.is-success { color: var(--ok-text); font-weight: 600; }
.cui-lookup-status.is-error { color: var(--err-text); }

/* Storefront billing form: adresă + cod poștal row. */
.form-group--flex-3 { flex: 3; }
.form-group--flex-1 { flex: 1; }

/* Storefront modal size variants. */
.modal--sm { max-width: 440px; }
.modal--md { max-width: 620px; }
.modal--lg { max-width: 720px; }
.modal--xl { max-width: 920px; }

/* Storefront success modal close button (full-width primary). */
.btn--success-close { margin-top: 20px; width: 100%; }

/* Admin modal body with no padding (custom-padded inside). */
.modal-body--flush { padding: 0; }
.modal-body--flush-relative { padding: 0; position: relative; }

/* Admin section titles reset inside dash-toolbar. */
/* Use .u-m-0 directly where needed. */

/* Admin dashboard pending alert (hidden by default, toggled via JS). */
/* Use .u-hidden directly. */

/* Admin catalog toolbar supplier filter max width. */
.dash-search--narrow { max-width: 220px; }

/* Admin proposals badge (count inside button). */
.listing-badge--xs {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* Admin "+ Furnizor nou" compact primary button. */
.btn--compact-primary { padding: 8px 16px; font-size: 13px; }

/* Admin pending listings section. */
.ad-pending-section { margin-top: 24px; }
.ad-pending-section__title { font-size: 14px; margin-bottom: 10px; }

/* Admin Commissions tab info banner. */
.sp-form-note--commission-info {
  margin: 12px 0 24px;
  padding: 12px 16px;
  background: var(--t-color-info-light);
  border-left: 3px solid var(--t-color-info);
  border-radius: 6px;
}

/* Admin Commissions section spacing. */
.sp-section-title--mt-sm { margin-top: 8px; }
.sp-section-title--mt-md { margin-top: 24px; }
.sp-section-title--mt-lg { margin-top: 32px; }

/* Admin Settings tab: outer column and setting cards. */
.ad-settings-column { max-width: 600px; }

.ad-setting-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--t-radius-lg, 12px);
  margin-bottom: 20px;
}
.ad-setting-card--disabled { opacity: 0.6; }

.ad-setting-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ad-setting-card__body { padding: 20px; }
.ad-setting-card__desc {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ad-setting-card__note {
  font-size: 11px;
  color: var(--text-3);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ad-setting-card__single-line {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
}
.ad-setting-card__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.ad-setting-card__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.ad-setting-card__input { width: 100%; box-sizing: border-box; padding: 10px 12px; }
.ad-setting-card__save-btn { font-size: 13px; padding: 10px 20px; }

/* Admin product modal: image mode toggle spacing. */
.pm-toggle--mb-8 { margin-bottom: 8px; }
/* Admin helper under image mode. */
.admin-helper--mb-8 { margin-bottom: 8px; }
/* Admin image upload wrapper. */
.pm-img-upload--mt-10 { margin-top: 10px; }
/* Admin clear-image button below upload (tight spacing). */
.clear-image-btn--tight { margin-top: 4px; }

/* Admin "+ Adaugă furnizor" nowrap primary. */
/* Use .u-nowrap directly. */

/* Supplier-shared clear-image button (danger outline, compact). */
.clear-image-btn--danger-compact {
  font-size: 11px;
  padding: 4px 10px;
  margin-top: 4px;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Supplier variant table inner padding. */
.sp-variant-table-wrap { padding: 12px 12px 0; }

/* Admin archive/proposals modal list container. */
.ad-archive-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}
.ad-proposals-list {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}
.ad-archive-list__empty,
.ad-proposals-list__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.ad-proposals-intro {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 12px;
}

/* Admin order drawer admin-note textarea. */
.ad-order-note-textarea {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 36px;
  max-height: 120px;
}

/* Admin supplier modal CUI button (compact 36px height). */
.btn--cui-lookup {
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 12px;
  height: 36px;
}
.cui-lookup-status--xs { font-size: 10px; margin-top: 3px; min-height: 14px; }

/* Admin supplier modal — required-asterisk colour (used inline for one label). */
.required-mark { color: var(--error); }

/* Admin commission hint tighter margin. */
.cm-hint--mb-10 { margin-bottom: 10px; }
.cm-flat-rate--mb-12 { margin-bottom: 12px; }
.cm-stage-rate-input { width: 100px; }
.cm-stage-product-wrap { position: relative; }
/* cmStage... selectors hidden-by-JS — use .u-hidden */

/* Admin supplier modal — shipping override subsection. */
.sp-form--shipping-override {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sp-form-row--shipping-header { margin-bottom: 4px; }
.sp-form-header-icon {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-form-note--mb-8 { margin-bottom: 8px; }

/* Admin payout modal intro line. */
.ad-payout-intro { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }

/* Supplier propose-modal layout. */
.pm-modal--propose { max-width: 780px; }
.pm-body--propose { padding: 20px; display: flex; gap: 20px; flex-wrap: wrap; }
.propose-form-col { flex: 1; min-width: 280px; }
.propose-form-intro { font-size: 12px; color: var(--text-3); margin: 0 0 14px; }
.propose-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.propose-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.propose-textarea { resize: vertical; }
.propose-variants-section {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.propose-variants-label { margin-bottom: 8px; }
.propose-variants-table { margin-bottom: 8px; }
.propose-variants-empty { color: var(--text-3); font-size: 12px; }
.propose-variant-input { flex: 1; font-size: 12px; padding: 6px 10px; }
.propose-variant-add-btn { font-size: 12px; padding: 6px 12px; white-space: nowrap; }

.propose-image-col { width: 200px; flex-shrink: 0; }
.propose-image-preview {
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.propose-image-icon { opacity: 0.18; }
.propose-image-btn { width: 100%; font-size: 12px; padding: 6px 0; margin-bottom: 6px; }
.propose-image-clear-btn {
  width: 100%;
  font-size: 11px;
  padding: 4px 0;
  color: var(--error);
  border-color: var(--error);
  display: none;
}

/* Supplier hidden compat wrapper (also hidden even in no-js). */
/* Use .u-hidden directly. */

/* Supplier category toolbar: compact propose/filter buttons. */
.btn--compact-pill { font-size: 12px; padding: 6px 14px; }

/* Supplier master-search fullwidth input. */
/* Use .u-w-full directly. */

/* Supplier "Produs — definit de admin" small annotation. */
.pm-section-head__admin-note {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 6px;
}