/* ============================================================
   SellSmart – shared utility classes
   Single source of truth for patterns that repeat across Razor
   files. Prefer these classes over inline Style attributes.
   ============================================================ */

/* --- Semantic color tokens (supplement MudBlazor palette) --- */
:root {
    --ss-text-muted:    #64748b;
    --ss-bg-surface:    #f8fafc;
    --ss-bg-surface-alt:#f1f5f9;
    --ss-border-light:  #e2e8f0;
    --ss-profit-pos-bg: #dcfce7;
    --ss-profit-pos-fg: #16a34a;
    --ss-profit-neg-bg: #fef3c7;
    --ss-profit-neg-fg: #d97706;
    --ss-warning-bg:    #FFF3CD;
    --ss-warning-border:#FFE69C;
    --ss-warning-fg:    #856404;
}

/* --- Text utilities --- */
.ss-text-muted       { color: var(--ss-text-muted) !important; }
.ss-fw-500           { font-weight: 500 !important; }
.ss-fw-600           { font-weight: 600 !important; }
.ss-fw-700           { font-weight: 700 !important; }
.ss-text-truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-text-uppercase   { text-transform: uppercase; letter-spacing: 0.5px; }
.ss-text-xs          { font-size: 0.625rem !important; }  /* 10px */
.ss-text-sm          { font-size: 0.6875rem !important; } /* 11px */

/* --- Background / surface utilities --- */
.ss-bg-surface       { background: var(--ss-bg-surface) !important; }
.ss-bg-surface-alt   { background: var(--ss-bg-surface-alt) !important; }

/* --- Border utilities --- */
.ss-border           { border: 1px solid var(--ss-border-light) !important; }
.ss-rounded-sm       { border-radius: 4px !important; }
.ss-rounded-md       { border-radius: 6px !important; }
.ss-rounded-lg       { border-radius: 8px !important; }

/* --- Card-like surface (common pattern: bg + border + radius) --- */
.ss-surface-card {
    background: var(--ss-bg-surface);
    border: 1px solid var(--ss-border-light);
    border-radius: 6px;
}

/* --- Profit / financial coloring --- */
.ss-profit-positive       { color: var(--ss-profit-pos-fg) !important; font-weight: 600; }
.ss-profit-negative       { color: var(--ss-profit-neg-fg) !important; font-weight: 600; }
.ss-profit-positive-bg    { background: var(--ss-profit-pos-bg); color: var(--ss-profit-pos-fg); }
.ss-profit-negative-bg    { background: var(--ss-profit-neg-bg); color: var(--ss-profit-neg-fg); }

/* --- Stat chip (muted bg + muted text, used in PriceAdjust, SaleDetail, etc.) --- */
.ss-chip-muted {
    background: var(--ss-bg-surface-alt) !important;
    color: var(--ss-text-muted) !important;
    font-weight: 500;
}

/* --- Warning banner (AddNewProductDialog pattern) --- */
.ss-warning-banner {
    background-color: var(--ss-warning-bg);
    border: 1px solid var(--ss-warning-border);
}
.ss-warning-text { color: var(--ss-warning-fg) !important; }

/* --- Stat label (tiny uppercase muted caption) --- */
.ss-stat-label {
    color: var(--ss-text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* --- Inline pill (small rounded bg block for values) --- */
.ss-inline-pill {
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}