/* ============================================================
   StockManager — Pastel Navigation Design System
   Global tokens + component classes. Per-component layout lives
   in the matching *.razor.css files.
   ============================================================ */

:root {
    /* --- Section accent pairs: solid / hover / pastel / soft --- */
    --blue-solid: #3d7ab8;   --blue-hover: #336aa0;   --blue-pastel: #cde4f7;   --blue-soft: #eaf3fb;
    --green-solid: #4e9a5f;  --green-hover: #438850;  --green-pastel: #d7ecd9;  --green-soft: #eef6ef;
    --peach-solid: #c47a54;  --peach-hover: #b06b46;  --peach-pastel: #f7e0d6;  --peach-soft: #fcf1eb;
    --lav-solid: #8b62b8;    --lav-hover: #7a55a6;    --lav-pastel: #eadcf3;    --lav-soft: #f5eefa;
    --slate-solid: #5b6b7f;  --slate-hover: #4c5a6b;  --slate-pastel: #e3e8ee;  --slate-soft: #eef1f5;

    /* --- Current section accent (overridden per route by the shell) --- */
    --sec-solid: var(--blue-solid);
    --sec-hover: var(--blue-hover);
    --sec-pastel: var(--blue-pastel);
    --sec-soft: var(--blue-soft);

    /* --- Neutrals & surfaces --- */
    --app-bg: #eef2f5;
    --card: #fff;
    --card-border: #e4e9ef;
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --card-shadow-lift: 0 8px 20px rgba(16, 24, 40, .08);
    --divider: #eef2f6;
    --divider-2: #f0f3f7;
    --divider-3: #f3f6f9;
    --table-head-bg: #f7f9fb;
    --row-hover: #fafbfd;
    --sidebar-border: #e6ebf0;

    /* --- Inputs --- */
    --input-border: #dbe3ec;
    --input-border-2: #e2e8f0;
    --input-bg: #fbfcfe;
    --input-bg-2: #f8fafc;
    --field-bg: #f7f9fb;
    --field-border: #e8edf2;

    /* --- Text --- */
    --text: #1f2a37;
    --text-2: #475569;
    --text-muted: #748193;
    --text-muted-2: #64748b;
    --text-faint: #94a3b8;
    --text-fainter: #b0bccb;
    --label: #8593a3;
    --label-2: #9aa6b4;

    /* --- Links --- */
    --link: #3d7ab8;
    --link-hover: #2f5f8f;

    /* --- Radii --- */
    --r-card: 14px;
    --r-ctrl: 10px;
    --r-tile: 10px;
    --r-pill: 999px;
}

/* Per-section accent overrides — set on an ancestor so custom
   properties cascade to the whole subtree (shell + page body). */
.acc-blue  { --sec-solid: var(--blue-solid);  --sec-hover: var(--blue-hover);  --sec-pastel: var(--blue-pastel);  --sec-soft: var(--blue-soft); }
.acc-green { --sec-solid: var(--green-solid); --sec-hover: var(--green-hover); --sec-pastel: var(--green-pastel); --sec-soft: var(--green-soft); }
.acc-peach { --sec-solid: var(--peach-solid); --sec-hover: var(--peach-hover); --sec-pastel: var(--peach-pastel); --sec-soft: var(--peach-soft); }
.acc-lav   { --sec-solid: var(--lav-solid);   --sec-hover: var(--lav-hover);   --sec-pastel: var(--lav-pastel);   --sec-soft: var(--lav-soft); }
.acc-slate { --sec-solid: var(--slate-solid); --sec-hover: var(--slate-hover); --sec-pastel: var(--slate-pastel); --sec-soft: var(--slate-soft); }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

h1:focus { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #d3dbe4;
    border-radius: 8px;
    border: 2px solid var(--app-bg);
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    line-height: 1;
}
.material-symbols-rounded.is-filled { font-variation-settings: 'FILL' 1, 'wght' 400; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.sm-content {
    max-width: 1180px;
    margin: 0 auto;
    animation: fadeUp .3s ease;
}
.sm-narrow { max-width: 560px; }

.sm-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sm-count { font-size: 13px; color: var(--text-muted); }
.sm-count b { color: var(--text); font-weight: 700; }

.sm-section-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--label);
}
.sm-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--label);
    margin: 8px 2px 12px;
}

.sm-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: 16px;
    background: none;
    border: 0;
    padding: 0;
}
.sm-back:hover { color: var(--text-2); }
.sm-back .material-symbols-rounded { font-size: 18px; }

.sm-grid { display: grid; gap: 16px; }
.sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sm-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sm-stack { display: flex; flex-direction: column; gap: 16px; }
.sm-num { font-variant-numeric: tabular-nums; }
.sm-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 1000px) {
    .sm-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .sm-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .sm-grid-2, .sm-grid-3, .sm-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Cards
   ============================================================ */
.sm-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    box-shadow: var(--card-shadow);
}
.sm-card--pad { padding: 20px; }
.sm-card--clip { overflow: hidden; }

.sm-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
}
.sm-card__title { font-size: 14.5px; font-weight: 700; }
.sm-card__link {
    font-size: 12.5px;
    color: var(--sec-solid);
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.sm-card__link:hover { color: var(--link-hover); }

.sm-jump-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 18px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: transform .12s ease, box-shadow .12s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}
.sm-jump-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-lift);
    color: inherit;
}
.sm-jump-card__title { font-size: 14.5px; font-weight: 700; margin: 13px 0 3px; }
.sm-jump-card__desc { font-size: 12px; color: var(--text-muted); }
.sm-jump-card__more {
    display: flex; align-items: center; gap: 5px;
    margin-top: 14px; font-size: 12.5px; font-weight: 600;
    color: var(--sec-solid);
}
.sm-jump-card__more .material-symbols-rounded { font-size: 17px; }

/* ============================================================
   Icon tiles
   ============================================================ */
.sm-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-tile);
    background: var(--sec-pastel);
}
.sm-tile .material-symbols-rounded { font-size: 21px; color: var(--sec-solid); }
.sm-tile--sm { width: 32px; height: 32px; border-radius: 9px; }
.sm-tile--sm .material-symbols-rounded { font-size: 18px; }
.sm-tile--md { width: 34px; height: 34px; border-radius: 9px; }
.sm-tile--md .material-symbols-rounded { font-size: 19px; }
.sm-tile--lg { width: 42px; height: 42px; border-radius: 11px; }
.sm-tile--lg .material-symbols-rounded { font-size: 23px; }

.sm-tile--blue  { background: var(--blue-soft); }
.sm-tile--blue  .material-symbols-rounded { color: var(--blue-solid); }
.sm-tile--green { background: var(--green-soft); }
.sm-tile--green .material-symbols-rounded { color: var(--green-solid); }
.sm-tile--peach { background: var(--peach-soft); }
.sm-tile--peach .material-symbols-rounded { color: var(--peach-solid); }
.sm-tile--lav   { background: var(--lav-soft); }
.sm-tile--lav   .material-symbols-rounded { color: var(--lav-solid); }
.sm-tile--slate { background: var(--slate-soft); }
.sm-tile--slate .material-symbols-rounded { color: var(--slate-solid); }

/* Stat tiles use the fuller pastel for higher contrast */
.sm-tile--pastel.sm-tile--blue  { background: var(--blue-pastel); }
.sm-tile--pastel.sm-tile--green { background: var(--green-pastel); }
.sm-tile--pastel.sm-tile--peach { background: var(--peach-pastel); }
.sm-tile--pastel.sm-tile--lav   { background: var(--lav-pastel); }
.sm-tile--pastel.sm-tile--slate { background: var(--slate-pastel); }

/* ============================================================
   Stat tiles
   ============================================================ */
.sm-stat {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 16px 18px;
    box-shadow: var(--card-shadow);
}
.sm-stat__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.sm-stat__label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   Buttons
   ============================================================ */
.sm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--sec-solid);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: var(--r-ctrl);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s ease, filter .12s ease;
}
.sm-btn:hover { background: var(--sec-hover); color: #fff; }
.sm-btn .material-symbols-rounded { font-size: 19px; }

.sm-btn--blue  { background: var(--blue-solid); }
.sm-btn--blue:hover  { background: var(--blue-hover); }
.sm-btn--green { background: var(--green-solid); }
.sm-btn--green:hover { background: var(--green-hover); }
.sm-btn--peach { background: var(--peach-solid); }
.sm-btn--peach:hover { background: var(--peach-hover); }
.sm-btn--lav   { background: var(--lav-solid); }
.sm-btn--lav:hover   { background: var(--lav-hover); }
.sm-btn--slate { background: var(--slate-solid); }
.sm-btn--slate:hover { background: var(--slate-hover); }

.sm-btn--outline {
    background: transparent;
    color: var(--text-muted-2);
    border: 1px solid var(--input-border-2);
}
.sm-btn--outline:hover { background: var(--input-bg-2); color: var(--text-2); }

.sm-btn--soft {
    background: var(--sec-soft);
    color: var(--sec-solid);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px;
}
.sm-btn--soft:hover { background: var(--sec-pastel); color: var(--sec-solid); filter: brightness(.99); }

.sm-btn--lg { width: 100%; padding: 12px; font-size: 14.5px; border-radius: 11px; }
.sm-btn:disabled { opacity: .55; cursor: not-allowed; }

.sm-link-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--sec-solid);
}
.sm-link-btn:hover { color: var(--link-hover); }
.sm-link-btn--danger { color: #b5484a; }

/* Space out adjacent action controls sitting side-by-side in a table cell
   (e.g. "Details / Remove", "Edit / Deactivate"). sm-link-btn has no padding,
   so without this they visually touch. Scoped to table cells so pagination
   and form buttons (which manage their own gaps) are unaffected. */
.sm-table td .sm-link-btn + .sm-link-btn,
.sm-table td .sm-link-btn + .sm-btn,
.sm-table td .sm-btn + .sm-link-btn,
.sm-table td .sm-btn + .sm-btn { margin-left: 16px; }

.sm-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: none; border: 0; cursor: pointer; color: var(--text-muted-2);
}
.sm-icon-btn:hover { background: #f1f5f9; }
.sm-icon-btn .material-symbols-rounded { font-size: 20px; color: var(--text-fainter); }

/* ============================================================
   Tables
   ============================================================ */
.sm-table { width: 100%; border-collapse: collapse; }
.sm-table thead tr { background: var(--table-head-bg); }
.sm-table th {
    text-align: left;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--label);
    white-space: nowrap;
}
.sm-table th.sm-r, .sm-table td.sm-r { text-align: right; }
.sm-table td { padding: 13px 20px; border-top: 1px solid var(--divider-2); font-size: 13.5px; color: var(--text-2); }
.sm-table tbody tr:hover { background: var(--row-hover); }
.sm-table tr.sm-row-link { cursor: pointer; }
.sm-table .sm-primary { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sm-table .sm-secondary { font-size: 11.5px; color: var(--text-faint); }

.sm-cell { display: flex; align-items: center; gap: 12px; }
.sm-cell__text { min-width: 0; }

/* ============================================================
   Pills / badges
   ============================================================ */
.sm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.sm-pill .material-symbols-rounded { font-size: 15px; }
.sm-pill--success { background: #d7ecd9; color: #3f7c4e; }
.sm-pill--warning { background: #f7e0d6; color: #b06b3f; }
.sm-pill--danger  { background: #f7d9d9; color: #b5484a; }
.sm-pill--info    { background: #cde4f7; color: #2f6296; }
.sm-pill--neutral { background: #eef1f5; color: #64748b; }
.sm-pill--lav     { background: #eadcf3; color: #7a55a6; }
.sm-pill--peach   { background: #f7e0d6; color: #b06b3f; }

/* ============================================================
   Banners
   ============================================================ */
.sm-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 11px;
    padding: 11px 15px;
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.4;
}
.sm-banner .material-symbols-rounded { font-size: 20px; flex: none; }
.sm-banner b { font-weight: 700; }

.sm-banner--green  { background: #eef6ef; border: 1px solid #d6ecda; color: #3f7c4e; }
.sm-banner--green  .material-symbols-rounded { color: #4e9a5f; }
.sm-banner--lav    { background: #f5eefa; border: 1px solid #e6d6f2; color: #6b4f8f; }
.sm-banner--lav    .material-symbols-rounded { color: #8b62b8; }
.sm-banner--blue   { background: #eaf3fb; border: 1px solid #cfe1f2; color: #2f6296; }
.sm-banner--blue   .material-symbols-rounded { color: #3d7ab8; }
.sm-banner--peach  { background: #fcf1eb; border: 1px solid #f2ddd0; color: #a5623c; }
.sm-banner--peach  .material-symbols-rounded { color: #c47a54; }
.sm-banner--amber  { background: #fff1cc; border: 1px solid #f4e3ad; color: #8a6a20; }
.sm-banner--amber  .material-symbols-rounded { color: #b6892a; }

/* ============================================================
   Forms / fields
   ============================================================ */
.sm-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}
.sm-label--muted { font-size: 11.5px; color: var(--text-muted); margin-bottom: 5px; }

/* Icon field wrapper — an input with a leading Material icon */
.sm-field {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--input-border);
    border-radius: 11px;
    padding: 11px 13px;
    background: var(--input-bg);
    margin-bottom: 16px;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.sm-field:focus-within { border-color: var(--sec-solid); box-shadow: 0 0 0 3px var(--sec-soft); }
.sm-field > .material-symbols-rounded { font-size: 19px; color: var(--text-faint); flex: none; }
.sm-field--valid { border-color: #cfe6d5; background: #f4faf5; }
.sm-field--valid > .material-symbols-rounded { color: #4e9a5f; }

/* Bare input that sits inside .sm-field */
.sm-field-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.sm-field-input::placeholder { color: var(--text-faint); }

/* Standalone input (no icon) */
.sm-input {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 11px;
    padding: 11px 13px;
    background: var(--input-bg);
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.sm-input:focus { border-color: var(--sec-solid); box-shadow: 0 0 0 3px var(--sec-soft); }
.sm-input::placeholder { color: var(--text-faint); }

/* Read-only styled value box */
.sm-readonly {
    font-size: 13.5px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 9px;
    padding: 9px 12px;
    color: var(--text);
}
.sm-hint { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.sm-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Filter chips (dropdown-style) */
.sm-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--input-border-2);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
}
.sm-filter .material-symbols-rounded { font-size: 18px; color: var(--text-faint); }
.sm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sm-toolbar__spacer { flex: 1; }
.sm-toolbar__note { font-size: 12px; color: var(--text-faint); }

/* Inline quantity edit control */
.sm-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--input-border-2);
    border-radius: 9px;
    padding: 5px 6px 5px 12px;
    background: var(--card);
}
.sm-qty input {
    width: 70px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
    font-family: inherit;
}
.sm-qty .material-symbols-rounded { font-size: 18px; color: var(--text-fainter); }

/* ============================================================
   Toggle switch
   ============================================================ */
.sm-switch {
    width: 40px; height: 23px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    border: 0;
    cursor: pointer;
    flex: none;
    transition: background .16s ease;
    padding: 0;
}
.sm-switch::after {
    content: "";
    position: absolute;
    top: 2.5px; left: 2.5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    transition: left .16s ease;
}
.sm-switch.is-on { background: var(--sec-solid); }
.sm-switch.is-on.sm-switch--green { background: var(--green-solid); }
.sm-switch.is-on::after { left: calc(100% - 20.5px); }

.sm-confirm-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    background: #eef6ef;
    border: 1px solid #d6ecda;
    border-radius: 10px;
}
.sm-confirm-strip__label { font-size: 13px; font-weight: 600; color: #3f7c4e; }

/* ============================================================
   Avatars & thumbnails
   ============================================================ */
.sm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #eef1f5;
    color: #5b6b7f;
    font-size: 11.5px;
    font-weight: 700;
    flex: none;
    text-transform: uppercase;
}
.sm-avatar--lav { background: #eadcf3; color: #7a55a6; }
.sm-avatar--lg { width: 36px; height: 36px; font-size: 13px; }

.sm-thumb {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 9px;
    background: repeating-linear-gradient(45deg, #eaf3fb, #eaf3fb 6px, #e0eef9 6px, #e0eef9 12px);
}
.sm-thumb--green { background: repeating-linear-gradient(45deg, #eef6ef, #eef6ef 6px, #e6f1e8 6px, #e6f1e8 12px); }
.sm-thumb--lav { background: repeating-linear-gradient(45deg, #f5eefa, #f5eefa 6px, #efe4f7 6px, #efe4f7 12px); }
.sm-thumb--sm { width: 32px; height: 32px; border-radius: 8px; }

/* Product image placeholder (hatch) */
.sm-imgph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #eaf3fb, #eaf3fb 8px, #e0eef9 8px, #e0eef9 16px);
    color: #7fa8cc;
    font-size: 11px;
    font-family: ui-monospace, Menlo, monospace;
}
.sm-imgph--green {
    background: repeating-linear-gradient(45deg, #eef6ef, #eef6ef 10px, #e6f1e8 10px, #e6f1e8 20px);
    color: #8fb599;
}

/* Chips (assigned orgs, members, etc.) */
.sm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    background: var(--sec-soft);
    border: 1px solid var(--sec-pastel);
    color: var(--text);
}
.sm-chip .material-symbols-rounded { font-size: 17px; color: var(--sec-solid); }
.sm-chip__meta { font-size: 11.5px; font-weight: 500; color: var(--sec-solid); }

.sm-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7faf8;
    border: 1px solid #e6f1e8;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
}
.sm-member-row .material-symbols-rounded { font-size: 18px; color: var(--green-solid); }

/* List rows inside cards */
.sm-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--divider-3);
}
.sm-list-row:last-child { border-bottom: 0; }

/* Definition rows (label ↔ value) */
.sm-def-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--divider-2);
}
.sm-def-row__label { font-size: 13px; color: var(--text-muted); }
.sm-def-row__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   Empty / loading states
   ============================================================ */
.sm-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.sm-empty .material-symbols-rounded { font-size: 40px; color: var(--text-fainter); display: block; margin: 0 auto 10px; }
.sm-loading { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

/* ============================================================
   Auth pages
   ============================================================ */
.sm-auth-title { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.sm-auth-sub { font-size: 13.5px; color: var(--text-muted-2); margin-bottom: 26px; }
.sm-auth-note { text-align: center; font-size: 12px; color: var(--text-faint); margin-top: 20px; }
.sm-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 22px;
    font-size: 12.5px;
}
.sm-auth-link { font-size: 12.5px; color: var(--link); cursor: help; }
.sm-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    margin: 0;
}
.sm-check input { accent-color: var(--blue-solid); width: 15px; height: 15px; }
.sm-valid-note { font-size: 11.5px; color: #4e9a5f; margin: -8px 0 22px; }

/* ============================================================
   Blazor framework classes (preserved)
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 12px; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 10px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   Utilities & shared component classes
   Replaces former inline style="" attributes (see project rule:
   no inline styles in .razor — use classes here instead).
   ============================================================ */

/* -- spacing -- */
.sm-m-0    { margin: 0; }
.sm-mb-0   { margin-bottom: 0; }
.sm-mb-12  { margin-bottom: 12px; }
.sm-mb-14  { margin-bottom: 14px; }
.sm-mb-16  { margin-bottom: 16px; }
.sm-mb-18  { margin-bottom: 18px; }
.sm-mb-22  { margin-bottom: 22px; }
.sm-mt-3   { margin-top: 3px; }
.sm-mt-6   { margin-top: 6px; }
.sm-mt-8   { margin-top: 8px; }
.sm-mt-14  { margin-top: 14px; }
.sm-mt-16  { margin-top: 16px; }
.sm-mt-18  { margin-top: 18px; }
.sm-mt-20  { margin-top: 20px; }
.sm-ml-8   { margin-left: 8px; }

/* -- sizing -- */
.sm-mw-420 { max-width: 420px; }
.sm-mw-460 { max-width: 460px; }
.sm-mw-560 { max-width: 560px; }
.sm-mw-640 { max-width: 640px; }
.sm-w-140  { width: 140px; }
.sm-w-200  { width: 200px; }
.sm-w-full { width: 100%; }

/* -- flexbox -- */
.sm-flex          { display: flex; }
.sm-inline-flex   { display: inline-flex; }
.sm-block         { display: block; }
.sm-flex-1        { flex: 1; }
.sm-flex-none     { flex: none; }
.sm-flex-col      { flex-direction: column; }
.sm-flex-wrap     { flex-wrap: wrap; }
.sm-items-center  { align-items: center; }
.sm-items-start   { align-items: flex-start; }
.sm-items-end     { align-items: flex-end; }
.sm-items-stretch { align-items: stretch; }
.sm-self-end      { align-self: flex-end; }
.sm-justify-start { justify-content: flex-start; }
.sm-gap-0   { gap: 0; }
.sm-gap-2   { gap: 2px; }
.sm-gap-8   { gap: 8px; }
.sm-gap-9   { gap: 9px; }
.sm-gap-10  { gap: 10px; }
.sm-gap-11  { gap: 11px; }
.sm-gap-12  { gap: 12px; }
.sm-gap-13  { gap: 13px; }
.sm-gap-14  { gap: 14px; }
.sm-gap-16  { gap: 16px; }
.sm-min-w-0   { min-width: 0; }
.sm-min-w-180 { min-width: 180px; }
.sm-min-w-200 { min-width: 200px; }

/* -- text -- */
.sm-text-muted { color: var(--text-muted); }
.sm-text-2     { color: var(--text-2); }
.sm-text-faint { color: var(--text-faint); }
.sm-text-left   { text-align: left; }
.sm-text-center { text-align: center; }
.sm-nowrap { white-space: nowrap; }
.sm-tnum   { font-variant-numeric: tabular-nums; }
.sm-fs-12  { font-size: 12px; }
.sm-fs-125 { font-size: 12.5px; }
.sm-fs-13  { font-size: 13px; }
.sm-fs-135 { font-size: 13.5px; }
.sm-fs-14  { font-size: 14px; }
.sm-fs-145 { font-size: 14.5px; }
.sm-fs-15  { font-size: 15px; }
.sm-fs-16  { font-size: 16px; }
.sm-fs-18  { font-size: 18px; }
.sm-fw-600 { font-weight: 600; }
.sm-fw-700 { font-weight: 700; }

/* -- message / status pages (NotFound, AccessDenied, Lockout, InvalidUser, Error) -- */
.sm-msg-page  { max-width: 460px; margin: 40px auto; text-align: center; }
.sm-msg-icon  { margin: 0 auto 14px; }
.sm-msg-title { margin: 0 0 6px; }
.sm-msg-text  { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* -- banner variants (complements .sm-banner / --green / --blue) -- */
.sm-banner--error { background: #f7d9d9; border: 1px solid #f0c4c4; color: #b5484a; }
.sm-banner--slate { background: #eef1f5; border: 1px solid #e3e8ee; color: #64748b; }

/* -- product image thumbnails -- */
.sm-thumb     { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: none; }
.sm-thumb-sm  { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; }
.sm-thumb-lg  { width: 96px; height: 96px; border-radius: 11px; flex: none; }
.sm-img-detail    { width: 100%; height: 150px; object-fit: contain; border-radius: 11px; margin-bottom: 16px; }
.sm-img-detail-ph { height: 150px; border-radius: 11px; margin-bottom: 16px; }
.sm-img-catalog    { width: 100%; height: 120px; object-fit: cover; display: block; }
.sm-img-catalog-ph { height: 120px; }

/* -- segmented control (Audit tab switch) -- */
.sm-segmented { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
.sm-segmented-tab {
    border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 16px; border-radius: 8px; background: transparent; color: #748193;
}
.sm-segmented-tab--active { background: #fff; color: #1f2a37; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

/* -- unstyled button that inherits its surroundings (sortable table headers, cell triggers) -- */
.sm-plain-btn { border: 0; background: transparent; outline: none; font: inherit; color: inherit; cursor: pointer; }
.sm-plain-btn--cell { text-align: left; width: 100%; }

/* -- scrollable checkbox/selection list (Users.Edit, Groups.Edit) -- */
.sm-checklist {
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--card-border); border-radius: 11px;
}
.sm-checklist--pad-lg  { padding: 10px 12px; }
.sm-checklist--pad-sm  { padding: 6px 4px; }
.sm-checklist-row      { display: flex; padding: 5px 0; }
.sm-checklist-row--btn { display: flex; width: 100%; padding: 9px 12px; border-radius: 9px; }

/* -- misc single-purpose utilities -- */
.sm-center-40 { margin: 40px auto; }
.sm-h-fit     { height: fit-content; }

/* -- page-specific classes (from the inline-style removal sweep) -- */
.sm-detail-grid        { grid-template-columns: 320px 1fr; }
.sm-detail-name        { margin-bottom: 2px; }
.sm-detail-section-hd  { padding: 14px 20px; border-bottom: 1px solid var(--divider-2); }
.sm-detail-section     { padding: 16px 20px; }
.sm-detail-pager       { padding: 14px 20px; }
.sm-row-tint           { background: #f7faf8; }
.sm-admin-eyebrow      { margin: 8px 2px 12px; }
.sm-catalog-card-body  { padding: 14px 16px; }
.sm-catalog-card-title { margin: 0 0 3px; }
.sm-viewer-cell-btn    { text-align: left; width: 100%; font: inherit; }
.sm-viewer-thumb-img   { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.sm-org-divider        { margin: 16px 0 22px; }
.sm-text-green         { color: var(--green-solid); }
.sm-text-base          { color: var(--text); }
.sm-list-indent        { padding-left: 18px; }
.sm-suppliers-toggle-row { margin: 22px 0 16px; }
.sm-error-devhead      { margin: 20px 0 8px; }
.sm-error-devtext      { margin: 0 0 10px; }
.sm-managenav-heading  { margin-bottom: 8px; }
.sm-managenav-link     { padding: 8px 4px; }
.sm-manage-grid        { grid-template-columns: 220px 1fr; align-items: start; gap: 20px; }

/* ============================================================
   Mobile overrides
   Kept at the very end of the file on purpose: media queries do not add
   specificity, so these must come *after* the component base rules they
   override (e.g. .sm-detail-grid, .sm-card--clip, .sm-input) to win on
   source order.
   ============================================================ */

/* Fixed two-column layouts collapse to a single column on phones. */
@media (max-width: 640px) {
    .sm-detail-grid,
    .sm-manage-grid { grid-template-columns: 1fr; }
}

/* Wide tables scroll horizontally inside their card rather than being clipped
   by .sm-card--clip (overflow: hidden). Setting only overflow-x keeps the
   vertical axis clipped, preserving the card's rounded corners; a min-width
   stops columns from crushing into an unreadable wrap. Text form controls are
   bumped to 16px so iOS Safari doesn't auto-zoom the viewport on focus. */
@media (max-width: 820px) {
    .sm-card--clip { overflow-x: auto; }
    .sm-table { min-width: 560px; }
    .sm-table th,
    .sm-table td { padding-left: 16px; padding-right: 16px; }

    .sm-input,
    .sm-field-input,
    .sm-qty input,
    select.sm-plain-btn { font-size: 16px; }
}