/* Bootstrap Override */
body {
    padding-top: 44px;
}

/*we are using fixed navbar .table-condensed > thead > tr > th, */
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 4px 6px !important;
}

.table > thead > tr > th,
.table > tfoot > tr > th {
    padding-right: 5px;
    padding-left: 5px;
}

.table > tbody > tr > td {
    padding: 6px 5px;
}

.table > tfoot > tr > td {
    padding: 6px 5px;
}

/* SPL red #E01A2C - the brand accent. #B31523 is its hover/active shade */
.btn-primary {
    background: #E01A2C;
    border-color: #E01A2C;
}

    .btn-primary:focus {
        background: #B31523;
        border-color: #B31523;
    }

    .btn-primary:active {
        background: #B31523;
        border-color: #B31523;
    }

    .btn-primary:hover {
        background: #B31523;
        border-color: #B31523;
    }

    

/* THE DISABLED STATE NEEDS ITS OWN RULE, AND IT IS NOT OPTIONAL. Measured 17 Sep 2026 on the
   rendered lab page: the SmartParts customer-search "New Quote" button computed
   rgb(33,150,243) - Material blue - not SPL red, because it starts DISABLED and only becomes
   enabled once a customer is chosen.
   The cause is SPECIFICITY, not load order. bootstrap.min.css carries
       .btn-primary[disabled], .btn-primary.disabled, ... { background-color:#2196f3 }
   at 0,2,0 (class + attribute selector), which beats a bare `.btn-primary` at 0,1,0 no matter
   which stylesheet loads last. Overriding only the base class therefore recolours enabled
   buttons and silently leaves every disabled one on the vendor blue.
   This is also why "primary measured #E01A2C on the rendered page" was a FALSE PASS on
   16 Sep: I sampled an ENABLED button. Sample the STATE, not just the element.
   The selector list below mirrors bootstrap`s exactly so specificity ties and source order
   decides. Bootstrap`s own .btn[disabled]{opacity:.65} still applies, so the result is a
   faded SPL red - which is what a disabled primary button should look like. */
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #E01A2C;
    border-color: #E01A2C;
}
.pagination > .active > a {
    background: #E01A2C;
    border-color: #E01A2C;
}

    .pagination > .active > a:hover {
        background: #dad9d9;
        border-color: #dad9d9;
        color: #000;
    }

.smartparts-background {
    background-image: url("/Content/Images/SmartParts/SmartParts_BG_Base.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.panel-default > .panel-heading {
    background-color: #dad9d9;
    border-color: #E01A2C;
    border-width: medium;
}

/* Page Container */
.page-container {
    padding: 0px 0px;
}

/* Content Wrapper */
.content-wrapper {
    padding-right: 20px;
}

/* Breadcrumb  / Page Title */
.page-header .breadcrumb-line:first-child {
    margin-top: 5px;
}

.breadcrumb-line {
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.page-header .breadcrumb-line {
    margin-left: 0px;
}

/* Side Bar */
.sidebar-content {
    border-radius: 0px;
}

/* Legend */
legend {
    border-bottom: solid 1px #ababab;
}

.popover {
    background-color: #37474f;
}

.activequoteline {
    background-color: rgba(0, 188, 212, 0.12);
}

/* Purchasing */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

    table td {
        padding: 5px;
        border: solid 1px #efefef;
        line-height: 15px;
    }

    table.data {
        border-spacing: 0;
        border-collapse: collapse;
    }

        table.data th {
            text-align: left;
            padding: 5px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#efefef');
            background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#efefef));
            background: -moz-linear-gradient(top, #f8f8f8, #efefef);
            border-top: solid 1px #cdcdcd;
            border-bottom: solid 1px #cdcdcd;
            font-weight: normal;
            white-space: nowrap;
            min-width: 65px;
        }

        table.data tr:nth-child(even) {
            background-color: #f8f8f8;
        }

        table.data td {
            padding: 5px;
        }

.k-grid-toolbar {
    text-align: right;
    padding: 10px !important;
}

.prodrow {
    height: 32.8px;
}

.stockrow {
    height: 32.8px;
}

.help-hyperlink {
    color: #AAAAAAFF !important;
}

    .help-hyperlink:hover {
        color: #4caf50 !important;
    }

/* ---------------------------------------------------------------------------
   Destructive actions - "Option C", chosen by cmcox 16 Sep 2026.

   WHY THIS EXISTS. Primary is now SPL red #E01A2C. The theme's btn-danger is
   #F44336 (measured in lab, not assumed). Two reds a shade apart meant Save and
   Delete read as the same button. Amber could not rescue it either: 42 btn-warning
   already own orange (#FF5722), and red-vs-orange is the confusable pair for
   red-green colour deficiency - roughly 8% of men, many of them trade customers.

   So destructive differs by FORM, not hue: outlined instead of filled. Filled =
   "this is the action to take". Outlined = "this one takes something away."
   It fills solid on hover/focus so the commitment is unmistakable at the moment
   of clicking. Pair it with an icon in the markup wherever the label is short.

   Applies to 56 btn-danger usages across the platform.
   --------------------------------------------------------------------------- */
.btn-danger {
    background: transparent;
    border-color: #E01A2C;
    color: #E01A2C;
    font-weight: 500;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active {
        background: #E01A2C;
        border-color: #E01A2C;
        color: #FFFFFF;
    }

    /* Disabled must not look like the quiet resting state of the enabled button. */
    .btn-danger[disabled],
    .btn-danger.disabled {
        background: transparent;
        border-color: #DDDDDD;
        color: #AAAAAA;
    }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SPL DESIGN SYSTEM
   Added 18 Sep 2026. cmcox: "Do the entire redesign now... every screen, most will require very
   little work, but you can quickly add value to them all."

   WHY IT LIVES IN THIS FILE, AND NOWHERE ELSE.
   Every area .csproj has a PostBuildEvent that xcopies its Views and Content OVER the Shell, so
   anything written into Shell\Areas\... or into a Shell copy of a layout is silently reverted on
   the next build. antworks.css exists ONLY in the Shell (the area Content folders hold one JPG,
   and nothing, respectively), so nothing overwrites it - and it is already linked LAST by five of
   the seven layouts. One file, no layout edits, reaches ~70 screens.

   ⚠ SPECIFICITY, NOT LOAD ORDER, DECIDES A FIGHT HERE. That lesson is written directly above this
   block: .btn-primary[disabled] in bootstrap.min.css is 0,2,0 and beat a bare .btn-primary no
   matter which file loaded last. Rules below that must win against Limitless are written at
   matching-or-higher specificity on purpose. Where a bare class is enough it is left bare -
   inflating specificity everywhere makes the NEXT override impossible.

   ⚠ WHAT THIS DELIBERATELY DOES NOT TOUCH: widths, floats, the grid, display modes, positioning.
   Those carry the page layout on ~70 screens nobody has re-tested, and a design system that
   reflows every table is not an improvement, it is an outage. This layer changes colour, type,
   spacing, borders, radius, shadow, focus and hover only.

   Bootstrap 3.3.5 vocabulary (the CSS) driven by Bootstrap 3.0.0 JS - so no 3.1+ JS component
   behaviour, and no BS4/BS5 class names.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Type ------------------------------------------------------------------------------
   Roboto is already pulled from Google Fonts by every area layout, so this costs no new request.
   The stack gains a real system fallback: the previous chain ended at a generic, so a blocked
   font CDN dropped the whole UI to Times. */
body,
.panel,
.modal-content {
    font-family: 'Roboto', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #231F20;
}

body {
    font-size: 1.6rem;            /* 16px against this platform's 10px root - see section 12. */
    line-height: 1.55;
    background: #f4f2f1;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.panel-title {
    color: #231F20;
    font-weight: 600;
    letter-spacing: -0.005em;
}

h1 { font-size: 2.8rem; }   /* 28px */
h2 { font-size: 2.4rem; }   /* 24px */
h3 { font-size: 2.0rem; }   /* 20px */
h4 { font-size: 1.8rem; }   /* 18px */
h5, h6 { font-size: 1.6rem; } /* 16px */

/* Numbers that sit in columns must line up. Tables and numeric inputs only - tabular figures in
   running prose look mechanical. */
.table td,
.table th,
input[type="number"],
.text-right {
    font-variant-numeric: tabular-nums;
}

a {
    color: #C4152A;
}

a:hover,
a:focus {
    color: #8d1018;
}

/* --- 2. Panels: the unit of content on nearly every screen ---------------------------------
   Limitless panels are flat white boxes with a hard 1px border and square corners. A small
   radius, a softer border and one real shadow separate content from the page without shouting.
   The heading gets weight rather than a fill, so a screen with six panels does not read as six
   competing headers. */
.panel {
    border: 1px solid #e6e2e1;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(35, 31, 32, 0.05);
}

.panel > .panel-heading {
    border-bottom: 1px solid #ece8e7;
    border-radius: 6px 6px 0 0;
    padding: 13px 16px;
    background: #ffffff;
}

.panel-title {
    font-size: 1.6rem;
    font-weight: 600;
}

.panel-body {
    padding: 16px;
}

.panel-flat > .panel-heading {
    background: transparent;
}

/* --- 3. Tables: this platform is mostly tables ---------------------------------------------
   The header becomes a quiet label row rather than a heavy band; rows get a hairline; hover is a
   real affordance, because most of these rows are clickable. */
.table > thead > tr > th {
    border-bottom: 2px solid #e6e2e1;
    color: #6f6866;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.table > tbody > tr > td {
    border-top: 1px solid #f0edec;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: #faf7f7;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfaf9;
}

/* --- 4. Forms ------------------------------------------------------------------------------
   ⚠ THE FOCUS RING IS AN ACCESSIBILITY FIX, not decoration. Limitless removes the browser outline
   and replaces it with a faint border change that is invisible against white, so a keyboard user
   has no idea where they are. Specificity is 0,2,0 to beat .form-control:focus in the vendor
   sheet. */
.form-control {
    border-color: #ddd8d7;
    border-radius: 5px;
    color: #231F20;
    box-shadow: none;
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: #E01A2C;
    box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.12);
    outline: 0;
}

.form-control::-webkit-input-placeholder { color: #a9a2a0; }
.form-control:-ms-input-placeholder { color: #a9a2a0; }

label,
.control-label {
    color: #4a4544;
    font-weight: 600;
    font-size: 1.3rem;
}

.has-error .form-control {
    border-color: #E01A2C;
}

.help-block {
    color: #8a8280;
    font-size: 1.2rem;
}

/* --- 5. Buttons ---------------------------------------------------------------------------
   Brand colours are set further up this file. This is geometry and feedback only. */
.btn {
    border-radius: 5px;
    font-weight: 600;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 26, 44, 0.20);
}

.btn-default {
    background: #ffffff;
    border-color: #ddd8d7;
    color: #4a4544;
}

.btn-default:hover,
.btn-default:focus {
    background: #f7f4f3;
    border-color: #cdc7c5;
    color: #231F20;
}

/* --- 6. Navigation -------------------------------------------------------------------------
   The fixed navbar is the one piece of chrome on every single screen, so it carries the brand.
   ⚠ body{padding-top:44px} is set at the top of this file and is NOT changed here - altering it
   would shift the content of all ~70 screens at once. The two opt-outs are body.spl-shell-isuppli
   (section 25) and body.spl-login (section 16a): no SPF layout fixes its navbar, so on those the
   44px was a grey strip above the bar (28 Sep 2026). */
.navbar-inverse {
    background: #231F20;
    border-color: #231F20;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .open > a {
    background: #000000;
    box-shadow: inset 3px 0 0 #E01A2C;
}

.navbar-inverse .navbar-nav > li > a:hover {
    background: #322d2d;
}

.sidebar .navigation > li.active > a,
.sidebar .navigation > li > a:hover {
    border-left: 3px solid #E01A2C;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top: 2px solid #E01A2C;
    color: #231F20;
    font-weight: 600;
}

/* --- 7. Feedback: alerts, labels, badges ---------------------------------------------------
   A left rule instead of a full tint. Full-bleed pastel blocks read as decoration and get
   ignored; a rule with a quiet fill reads as a note and gets read. */
.alert {
    border-radius: 0 5px 5px 0;
    border-width: 1px 1px 1px 3px;
    padding: 12px 15px;
}

.alert-danger { border-left-color: #E01A2C; background: #fdf0f1; color: #8d1018; }
.alert-success { border-left-color: #2e9e5b; background: #f0f9f3; color: #1d6b3c; }
.alert-warning { border-left-color: #d98324; background: #fdf6ed; color: #8a5312; }
.alert-info { border-left-color: #2f6fb5; background: #eff5fc; color: #1f4d80; }

.label,
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 3px;
}

/* --- 8. Modals ----------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(35, 31, 32, 0.22);
}

.modal-header {
    border-bottom: 1px solid #ece8e7;
    padding: 16px 20px;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 600;
}

/* --- 9. Bootgrid ---------------------------------------------------------------------------
   Used by most reporting screens, and it ships its own look that ignores everything above. */
.bootgrid-header,
.bootgrid-footer {
    background: transparent;
    border: 0;
    padding: 8px 0;
}

.bootgrid-table th > .column-header-anchor {
    color: #6f6866;
    font-weight: 600;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: #E01A2C;
    border-color: #E01A2C;
}

.pagination > li > a {
    color: #4a4544;
}

/* --- 11. Section headings, form rhythm and dense inputs -------------------------------------
   ⚠ ADDED 22 Sep 2026, and the reason is leverage rather than taste. cmcox: "It is not just
   seven pages; we have got a lot more to get through." Measured across the four areas - iSuppli,
   SmartParts, Warehouse, Purchasing - 233 views, of which:

       .form-group      102 views        .form-control     95 views
       .btn-primary      90 views        .control-label    46 views
       .panel            39 views        <legend>          29 views
       .datatable-basic  23 views

   So styling these shared patterns HERE reaches a hundred screens in one change, where restyling
   them individually is a hundred deploys and a hundred chances to break something. Per-screen
   work is then reserved for the few that genuinely need new structure.

   ⚠ SAME RESTRAINT AS THE REST OF THIS FILE: colour, type, spacing, borders, radius - never
   widths, floats, the grid, display modes or positioning. Those carry the layout on screens
   nobody has re-tested.

   ⚠ AND EVERYTHING HERE IS IN em, NOT px, so it scales with the base size rather than fighting
   it. That matters because the base is under review - see section 1. */

/* A <legend> is the section heading on 29 screens, and Bootstrap 3 renders it as a full-width
   grey rule with the text floating on it, which reads as an artefact of the form library rather
   than as a deliberate heading. This is the single change that most improves the screens I have
   NOT hand-redesigned. */
fieldset > legend,
legend.text-semibold {
    border-bottom: 1px solid #efebe9;
    color: #231F20;
    font-size: 1.22em;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 1.15em;
    padding-bottom: 0.45em;
    width: 100%;
}

/* Consistent vertical rhythm between rows of a form. Bootstrap's 15px is tight once labels sit
   above their fields at narrow widths. */
.form-group {
    margin-bottom: 1.15em;
}

/* ⚠ input-xs IS USED HEAVILY AND IS GENUINELY TOO SMALL - it is most of why these screens read
   as cramped. Raising the minimum height without touching width keeps every grid intact while
   making the controls tappable: 24px is below the 24px minimum target size of WCAG 2.2 AA
   (2.5.8) and nowhere near the 44px the same standard recommends. */
.form-control.input-xs {
    font-size: 1.6rem;            /* NOT smaller - see section 12 on the iOS zoom trap. */
    height: auto;
    min-height: 2.5em;
    padding: 0.35em 0.7em;
}

/* Right-aligned labels are unreadable the moment Bootstrap 3 stacks them above their field: the
   text ends up hard against the wrong edge. Fixed globally here rather than per screen - it was
   the same three lines on every one I redesigned by hand. */
@media (max-width: 1199px) {
    .form-horizontal .control-label.text-right {
        text-align: left;
    }
}

/* --- 10. Print -----------------------------------------------------------------------------
   Several of these screens get printed - statements, packing lists, sticker sheets. Chrome that
   is useful on screen is noise on paper, and a page background costs real toner. */
@media print {
    body { background: #ffffff; padding-top: 0 !important; }
    .navbar, .sidebar, .oj-search, .btn, .pagination, .bootgrid-header, .bootgrid-footer { display: none !important; }
    .panel { border: 1px solid #ccc; box-shadow: none; }
    a[href]:after { content: ""; }
}

/* --- 12. The two rules that let a 16px base work on a table-heavy platform ------------------
   Researched 22 Sep 2026 against WCAG 2.2, GOV.UK, USWDS, Bootstrap 5, Tailwind, Material 3,
   Atlassian, IBM Carbon and Fluent 2, plus Legge & Bigelow (2011) on visual angle. cmcox:
   "go and do some research to see what the correct standard and size is."

   The answer was 16px, and this platform was at 13.5px - below EVERY system surveyed, including
   Bootstrap 3's own 14px default. Somebody shrank it deliberately; nothing in the framework
   produces 13.5.

   ⚠ BUT "16px everywhere" WOULD BE THE WRONG READING, and this section is why. Carbon, MUI and
   Bootstrap 5 all ship dense data tables and NONE of them shrink the type to get density - they
   use padding and line-height. Carbon's five table sizes (xs/sm/md/lg/xl) share ONE font size
   and differ only in row height. So density here is bought with line-height 1.35 and row
   padding, and the glyphs stay readable. */
.table > tbody > tr > td,
.table > tfoot > tr > td {
    font-size: 1.4rem;            /* 14px - the enterprise-table norm, not a compromise */
    line-height: 1.35;
}

/* The column-header row stays at 12px (section 3): it is an uppercase LABEL, and 12px is the
   floor every surveyed system uses for labels and captions. It is not body text. */

/* ⚠ THE ONE HARD NUMBER IN THE WHOLE PIECE OF RESEARCH, and it is the reason this section is
   not merely cosmetic. iOS Safari auto-zooms the viewport whenever a FOCUSED input computes at
   under 16px, and it does not zoom back out when the field loses focus. On a portal that is
   mostly filter and search boxes, used ~70% from a phone, that fires on every single field and
   leaves the page stranded at the wrong zoom. Only the focused control needs 16px - the labels
   and table cells around it may stay smaller, which is exactly what the rules above do.

   Everything here is a font-size only. No widths, no display, no positioning: this section
   cannot reflow a column. */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
select,
textarea {
    font-size: 1.6rem;
}

/* ⚠ AND THE FONT-SIZE RULE ABOVE IS NOT SAFE ON ITS OWN. Bootstrap 3.3.5 compiles
   .form-control to a FIXED "height: 34px" alongside "font-size: 14px; padding: 6px 12px;
   line-height: 1.428571429". Raising the text to 16px without touching that box needs
   16 x 1.4286 + 12 padding + 2 border = 36.9px of room inside 34px, so the text would sit
   cramped and clipped in every one of the 95 views that use .form-control.

   ⚠ NOTE WHAT WOULD HAVE HAPPENED WITHOUT THIS RULE: an automated check reading
   boundingBox().height would report a healthy 34 and pass, because the BOX is fine - it is the
   TEXT inside it that no longer fits. That is a green test over a broken screen, so the spec
   asserts the computed font-size directly rather than inferring it from a height.

   height:auto + min-height rather than a bigger fixed height, so a control that needs more room
   (a textarea, a select with a long option) can still take it. Input groups keep their alignment
   because Bootstrap lays them out as table cells, which stretch to the row. */
.form-control {
    height: auto;
    min-height: 2.5em;            /* 40px at 16px. 2.35em measured 37.6px against a 38.9px need. */
}

/* ⚠ .input-sm WOULD HAVE ESCAPED THE RULE ABOVE, AND SPECIFICITY IS WHY. Bootstrap ships
   `.input-sm { font-size: 12px }` and, for old IE, `select.input-sm { height:30px; line-height:30px }`
   at (0,1,1) — which BEATS a bare `.form-control` at (0,1,0) no matter which stylesheet loads
   last. So ten views across iSuppli and SmartParts would have kept 12px controls and gone on
   triggering the iOS zoom that this whole section exists to stop. Same trap as the disabled
   btn-primary further up this file: overriding the base class silently misses the modifier.
   Two classes here (0,2,0) wins cleanly.
   `.input-lg` needs nothing — Bootstrap already sets it to 18px, which is over the 16px floor. */
.form-control.input-sm,
select.form-control.input-sm {
    font-size: 1.6rem;
    height: auto;
    line-height: normal;
    min-height: 2.5em;
}

/* Bootstrap sets select.form-control's line-height to its fixed height for old IE; that would
   re-impose the 34px box through the back door. */
select.form-control {
    line-height: normal;
}

/* Why rem and not px, given that px does NOT fail WCAG 1.4.4 (browser zoom satisfies it):
   Chrome's and Firefox's own font-size preference scales rem-declared text and silently ignores
   px-declared text. Zoom is a different control and most people never touch it. So px is a real
   harm to real users without being a conformance failure - worth keeping those two claims apart
   rather than overstating the case.

   ⚠ 🔴 AND THE ROOT ON THIS PLATFORM IS ALREADY PINNED TO 10px - THIS IS THE TRAP THAT NEARLY
   SHIPPED A REGRESSION. `bootstrap.min.css` carries a literal `html { font-size: 10px }`,
   measured in the browser on iSuppli, SmartParts and Warehouse alike (grepping the minified
   theme was useless; the computed cascade is the only authoritative answer). So the first
   version of this section wrote `body { font-size: 1rem }` meaning 16px and got **10px** - text
   SMALLER than the 13.5px it replaced, the exact opposite of what was asked for. Spec 28 caught
   it by asserting the computed value; every other check in that spec stayed green.

   Hence the 1.6 multiplier throughout: 1.6rem = 16px, 1.4rem = 14px, 1.2rem = 12px. Read every
   size in this file as "rem x 10 = px" until the root is unlocked.

   ⚠ Note what the pinned root costs, since it is the reason rem was chosen in the first place:
   a root set in absolute px does NOT track the reader's browser font-size preference, so rem
   here buys consistency but not accessibility. Unlocking it (html { font-size: 100% }) is the
   right fix and is ticketed - it is held back only because 14-28 theme rules already declare rem
   font-sizes against the 10px assumption and would all grow 1.6x at once. That is a separate,
   visually-verified change, not a rider on this one. */

/* --- 13. A fixed .container inside the sidebar layout, which is 20 screens wide ------------
   🔴 THE ONLY LAYOUT RULE IN THIS FILE, AND IT IS HERE BECAUSE IT FIXES A MEASURED DEFECT
   RATHER THAN A TASTE. Every other section is colour, type and spacing on purpose.

   Measured 22 Sep 2026 on the lab Warehouse dashboard at a 1280px viewport: the document
   scrolls horizontally by 200px. The offending element is a Bootstrap `.container`, which is
   `width: 1170px` plus 30px of padding at this breakpoint, sitting inside `.content-wrapper` -
   which already begins after the ~280px fixed sidebar. 1200 + 280 = 1480 against a 1280 viewport.

   ⚠ IT IS NOT MINE, AND THAT WAS PROVED RATHER THAN ASSUMED. Reinstating the previous 13.5px
   type scale from inside the browser and re-measuring gave an identical 200px and named the same
   element. Type had nothing to do with it; a fixed width inside an already-offset column cannot
   fit by construction.

   ⚠ AND IT IS NOT ONE SCREEN. 20 views use a fixed `.container`: 13 in SmartParts (including
   Product/ProductList and the Home/_UserDetail partial that the busiest dashboard on the platform
   renders), 5 in Warehouse, 2 in iSuppli. Fixing the one view that a test happened to open would
   have left nineteen.

   The selector is deliberately narrow: `.container` keeps its fixed width everywhere else, and
   only loses it where a sidebar has already taken the horizontal space it was assuming. Bootstrap
   treats a fluid container as the supported choice inside a constrained column, so this is what
   `.container-fluid` would have done had these views used it. Nothing here changes display,
   float, position or the grid - a container that stops overhanging simply lets the row inside it
   lay out in the space that actually exists. */
/* ⚠ 1500px, NOT 100%, AND THE TWO RULES WERE FIGHTING. This was `max-width: 100%` when first
   written, which fixed the overflow it was aimed at - and then SILENTLY DEFEATED the reading
   measure in section 14 on every one of the 20 views that use a fixed .container. Specificity
   again: this selector is (0,2,0) and `.content-wrapper > *` is (0,1,0), so this one wins
   wherever both apply, and `100%` of a 1640px column is 1640px.
   Measured on the lab Warehouse screens: the page header obeyed the 1500 measure while the
   .container beneath it sat at 1620, so a heading and the content it belonged to had different
   right edges. Capping here at the same measure makes the two rules agree instead of compete.

   🔴 AND THIS FIX WAS WRITTEN TWICE. The first time it was reverted by my own
   `git checkout -- SPF.WebPlatform/SPF.WebPlatform.Shell/`, which I ran to discard the Shell
   BUILD ARTEFACTS the publish regenerates - and which discarded this uncommitted SOURCE change
   sitting in the same directory tree. The next deploy then shipped the old rule and ProcessGRN
   silently went back to 1620px. ⚠ `git checkout -- <dir>` does not distinguish "generated" from
   "mine"; commit a source fix before cleaning anything near it. */
.content-wrapper .container {
    max-width: 1500px;
    width: auto;
}

/* --- 14. A reading measure, because a 1920px monitor is not a 1920px form -------------------
   cmcox, 22 Sep 2026, with screenshots: the pages "either stretch or float in the middle of the
   page" on his monitor. Both are real and they are two different faults.

   MEASURED at 1920 wide on lab, rather than guessed:
     .page-container  display=table      width=1920
     .content-wrapper display=TABLE-CELL width=1640  left=280
     .page-header     display=block      width=1620
     fieldset         display=block      width=1620

   ⚠ THE TABLE-CELL IS THE WHOLE REASON THIS RULE LOOKS ODD. A max-width on a table-cell is
   ignored by CSS, so capping `.content-wrapper` itself - the obvious thing to write - would have
   changed nothing at all and looked like a deployment failure. The cap goes on its BLOCK-LEVEL
   CHILDREN, which is where the width actually resolves.

   1. THE STRETCH. A search form 1620px wide puts the label at the far left of the monitor and its
      field a hand's width away, and a table stretches its columns into whitespace. 1500px is
      about as wide as a dense form stays scannable.
   2. THE FLOAT. Anything centred inside that space drifts away from the navigation it was
      launched from, so the eye has to travel back and forth. Block elements are left-aligned by
      default, so capping the width is enough to fix this one - EXCEPT where a view centres itself
      on purpose, which the landing page did with `margin: 0 auto`. That is fixed in the view.

   Left-aligned rather than centred is deliberate: with a fixed left sidebar, content that starts
   where the navigation ends is predictable, and the leftover space sits in one place instead of
   being split either side. */
.content-wrapper > * {
    max-width: 1500px;
}

/* The page title bar reads as part of the content, so it takes the same measure - otherwise the
   heading rule runs 120px further right than everything beneath it. */
.content-wrapper > .page-header {
    max-width: 1500px;
}

/* =============================================================================================
   15. THE EMPTY STATE
   =============================================================================================
   A screen with nothing on it is not a neutral outcome - it reads as broken, and the user has no
   way to tell "there is no data" from "this page failed". Three of these have now been written by
   hand on three different screens, which is the signal to make it a primitive.

   cmcox found the worst one himself: SmartParts Product Information rendered a completely blank
   page when reached without a search, under a layout heading that says "Quotation Items". He was
   looking at a screenshot I had sent him as evidence that the screen needed no work.

   Use: a .spf-empty block wherever a list, table or panel can legitimately have nothing in it.
   State what is not there in the lead, and how to get something there in the help line. */
.spf-empty {
    padding: 3.2rem 2.4rem;
    text-align: center;
    color: #5a5a5a;
    background: #fbfbfb;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    margin-bottom: 2rem;
}

.spf-empty-lead {
    margin: 0 0 0.6rem;
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
}

/* The help line is the part that does the work, so it gets a readable measure rather than running
   the full width of a 1500px content column. */
.spf-empty-help {
    margin: 0 auto 1.6rem;
    max-width: 52rem;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* =============================================================================================
   16. THE SIGN-IN CARD - one design for every SPF login
   =============================================================================================
   cmcox, 23 Sep 2026: "No logo on some login pages (Smartparts for instance); or old one
   (iSuppli, Big Brother)". Measured on lab the same day: SmartParts and Purchasing rendered NO
   logo at all, iSuppli and Big Brother the old 3-D "partner" JPG. All four now use this card and
   the real lockup from the brand pack. Moved here from the iSuppli view so it exists once. */
/* 16a. No grey strip above the sign-in bar (cmcox, lab, 28 Sep 2026). body{padding-top:44px} at the
   top of this file is room for a FIXED navbar, and no SPF layout fixes its navbar - so the 44px
   showed as a grey band above the bar. Opt-in per layout via <body class="spl-login"> (iSuppli
   and SmartParts sign-in), so the ~70 other screens do not move. */
body.spl-login {
    padding-top: 0;
}

.lg-wrap {
    display: flex;
    justify-content: center;
    padding: 28px 16px 48px;
}

.lg-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e4e0de;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(35, 31, 32, .06);
    padding: 30px 30px 26px;
}

.lg-logo {
    display: block;
    margin: 0 auto 22px;
    max-width: 220px;
    height: auto;
}

.lg-card h1 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #231F20;
}

.lg-card .lg-sub {
    margin: 0 0 22px;
    color: #6f6866;
    font-size: 13.5px;
}

.lg-field { margin-bottom: 16px; }

.lg-field label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
    color: #231F20;
}

.lg-field .require { color: #E01A2C; }

.lg-field input {
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 14.5px;
    border: 1px solid #ddd8d6;
    border-radius: 4px;
    background: #fff;
    color: #231F20;
}

    .lg-field input:focus {
        outline: 0;
        border-color: #E01A2C;
        box-shadow: 0 0 0 3px rgba(224, 26, 44, .12);
    }

.lg-actions { margin-top: 20px; }

.lg-actions .btn {
    width: 100%;
    height: 42px;
    font-size: 15px;
    font-weight: 600;
}

.lg-links {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}

.lg-note {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #efebe9;
    color: #6f6866;
    font-size: 12.5px;
    text-align: center;
}



/* =============================================================================================
   17. SMARTPARTS IS A WORKBENCH, NOT A FORM - it gets the width
   =============================================================================================
   cmcox, 23 Sep 2026: "Smartparts grid attached to the left. simulate a high res monitor".
   MEASURED on lab: the quote grid's right edge sat at the SAME pixel (1480) at 1920, 2560 and
   3840 wide, leaving 1,080 and 2,360px of empty page to its right. Cause: the 1500px reading
   measure in section 14. That measure is right for a form beside a sidebar; SmartParts has no
   sidebar and its main job is a 10-column grid, so the cap simply pinned it left.

   So SmartParts content is fluid, with a generous cap that only bites on very large monitors,
   and it is CENTRED - on a 3840 screen a 2400px grid centred reads as intended, a 2400px grid
   hard left does not. Scoped to .sp-workbench, which ONLY the SmartParts layouts set - not .smartparts-background, which every layout carries. */
.sp-workbench .content-wrapper > *,
.sp-workbench .content-wrapper .container {
    max-width: 2400px;
    margin-left: auto;
    margin-right: auto;
}

/* .content-wrapper has only ever had a RIGHT gutter (section 1) - on the sidebar screens the
   sidebar is the left one. SmartParts has no sidebar, so below 2400px its heading and panels sat
   at x=0, touching the screen edge (CheckOut screenshot, 23 Sep). Match the right gutter. */
.sp-workbench .content-wrapper {
    padding-left: 24px;
    padding-right: 24px;
}

/* The sidebar screens keep their 1500px measure, but on a monitor wider than ~2400px the space
   left of it is the sidebar and the space right of it is 2,000px of nothing - so centre it there. */
@media (min-width: 2400px) {
    .content-wrapper > *,
    .content-wrapper .container {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =============================================================================================
   18. GRID TEXT AT READING SIZE
   =============================================================================================
   cmcox, 23 Sep 2026: "Font still looks small, is this 16?". MEASURED: body text IS 16px, but
   the SmartParts grid cells were 14px, their headers 12px and every search box 12px - the parts
   of the screen a rep actually reads all day. They are 16px now, headers 13px (they are
   upper-case and tracked, which reads larger than its size). rem x 10 = px on this platform
   (section 12). */
.content-wrapper .table > tbody > tr > td,
.content-wrapper .table > tfoot > tr > td,
.content-wrapper .bootgrid-table td {
    font-size: 1.6rem;
}

.content-wrapper .table > thead > tr > th,
.content-wrapper .bootgrid-table th {
    font-size: 1.3rem;
}

.content-wrapper .form-control,
.navbar .form-control {
    font-size: 1.6rem;
}

/* =============================================================================================
   19. A COMMAND BUTTON MAY WRAP, IT MAY NEVER VANISH
   =============================================================================================
   cmcox, 23 Sep 2026: "Lost button cut off in the grid as an ellipse". Bootgrid lays tables out
   with table-layout:fixed and gives EVERY cell overflow:hidden + text-overflow:ellipsis +
   nowrap. The commands column is a fixed 18%, so whenever the row carries more columns (his
   login adds PDF SPL and PDF OEM) the last button - Mark as lost - was clipped and replaced by
   "...". Text may be elided; a button may not. Cells that hold buttons now wrap instead. */
.bootgrid-table td:has(> .btn),
.bootgrid-table td:has(> button),
.bootgrid-table td:has(> a.btn),
.bootgrid-table td:has(> .btn-group) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.bootgrid-table td:has(> .btn) > .btn,
.bootgrid-table td:has(> button) > button {
    margin: 2px 2px 2px 0;
}

/* =============================================================================================
   20. THE CART GRID, ALIGNED
   =============================================================================================
   cmcox, 23 Sep 2026: "Grid is not straight in the cart". Two causes, both measured: the tick
   boxes carried .form-control, so each was drawn as a full-width 38px input box; and every
   header was left-aligned while the money columns beneath it were right-aligned. Columns by
   position: 1 select, 2 wishlist, 3 OEM P/N, 4 photo, 5 code, 6 description, 7 model, 8 brand,
   9 price, 10 qty, 11 line total, 12 GP%, 13 ETA, 14 condition, 15 zero value, 16 update,
   17 status. ⚠ Keep in step with the <thead> in _SmartPartsLayout.cshtml. */
#quoteItemDetail > .form-group > .row > table.sp-cart > thead > tr > th,
#quoteItemDetail > .form-group > .row > table.sp-cart > tbody > tr > td {
    vertical-align: middle;
}

#quoteItemDetail > .form-group > .row > table.sp-cart > * > tr > :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(15), :nth-child(16), :nth-child(17)) {
    text-align: center;
}

#quoteItemDetail > .form-group > .row > table.sp-cart > * > tr > :is(th, td):is(:nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)) {
    text-align: right;
}

#quoteItemDetail > .form-group > .row > table.sp-cart > tbody > tr > td:is(:nth-child(9), :nth-child(10)) input {
    text-align: right;
}

#quoteItemDetail table.sp-cart input[type="checkbox"].form-control {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    vertical-align: middle;
}

/* =============================================================================================
   21. THE SPL MARK IN EVERY TOP BAR
   ============================================================================================= */
.spl-nav-mark {
    height: 22px;
    width: auto;
    margin: -3px 10px 0 0;
    vertical-align: middle;
}
/* =============================================================================================
   22. BIG BROTHER'S COMMAND CELLS
   =============================================================================================
   cmcox, 23 Sep 2026: "Improve spacing/design in the big brother commands columns". The cells
   held a bare checkbox and 1-3 extra-small buttons with no gap, so a tick box and a 22px icon
   button touched and were easy to mis-hit on a warehouse touch screen. Same controls, same
   order: a real gap, a 32px target, and a tick box the size of the button beside it. */
.content-wrapper .bootgrid-table td > input.command-multi,
.content-wrapper .bootgrid-table td > input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.content-wrapper .bootgrid-table td > .btn-xs {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    margin: 2px 6px 2px 0;
    font-size: 1.4rem;
    line-height: 30px;
    vertical-align: middle;
}
/* 21b. Measured after the first lab deploy: the theme sizes images inside .navbar-brand to 16px
   and the brand box wraps, so the mark sat on one line and the product name dropped beneath it.
   One line, mark at 22px. */
.navbar .navbar-brand {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.navbar .navbar-brand > img.spl-nav-mark {
    height: 22px;
    width: auto;
    max-height: none;
    margin: 0 10px 0 0;
}

/* 21c. Product switcher: "iSuppli | Returns" (T27, 25 Sep 2026; the current item read "Documents &
   orders" until 28 Sep, when the separate "iSuppli" wordmark beside it was dropped). The Returns header
   carries the same pair (current product in SPL red). px, not rem: the root font-size is pinned
   to 10px here. ⚠ Not yet seen on lab - check the rendered bar before release (Razor and CSS
   are only proved by eyes, never by a clean build). */
.navbar .spl-product-switcher {
    float: left;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    margin-left: 12px;
    font-size: 13px;
}

.navbar .spl-product-switcher .spl-product-current,
.navbar .spl-product-switcher .spl-product-link {
    padding: 5px 12px;
    border-radius: 6px;
    line-height: 18px;
    white-space: nowrap;
}

.navbar .spl-product-switcher .spl-product-current {
    background: #E01A2C;
    color: #fff;
    font-weight: 600;
}

.navbar .spl-product-switcher .spl-product-link {
    color: #fff;
}

.navbar .spl-product-switcher .spl-product-link:hover,
.navbar .spl-product-switcher .spl-product-link:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

/* 16b. The sign-in card is centred on the PAGE, not inside the 1500px reading measure of
   section 14 - measured on lab, the measure put it 210px left of centre on a 1920 screen. */
.content-wrapper > .lg-wrap {
    max-width: none;
}

/* 18b. Grid headers: bootgrid puts the label in its own span, which kept the theme's 12px. */
.content-wrapper .bootgrid-table th .column-header-anchor > .text,
.content-wrapper .bootgrid-table th > .text {
    font-size: 1.3rem;
}
/* 20b. The cart sits outside .content-wrapper, so section 18 never reached it. Same sizes. */
#quoteItemDetail table.sp-cart > thead > tr > th { font-size: 1.3rem; }
#quoteItemDetail table.sp-cart > tbody > tr > td,
#quoteItemDetail table.sp-cart > tfoot > tr > td,
#quoteItemDetail table.sp-cart .form-control { font-size: 1.6rem; }
/* =============================================================================================
   23. CHECKOUT ORDER DETAILS AS A FORM
   =============================================================================================
   The order details (comments, reference, warehouse, delivery method, salesperson, address,
   contact, special deal) sat in the quote table's footer, label in one 4-column cell and field in
   the next - so every label was a hand's width from its field. Now a two-column form, label above
   field. The fields keep their ids; the rows that scripts show and hide keep their classes. */
.sp-checkout-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px 32px;
    max-width: 1100px;
    padding: 20px 10px 8px;
}

.sp-checkout-form .sp-field > label {
    display: inline-block;
    margin: 0 8px 6px 0;
    font-weight: 600;
    font-size: 1.4rem;
    color: #231F20;
}

.sp-checkout-form .sp-field:has(textarea) {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .sp-checkout-form { grid-template-columns: 1fr; }
}
/* 23b. Checkout in three sections (26 Sep 2026): the quote, delivery, sales. Each section is a card
   with a numbered heading and one line saying what it is for, so a rep never has to guess which
   "contact" or which "address" a field means. */
.sp-checkout-sections {
    display: grid;
    gap: 16px;
    max-width: 1100px;
    padding: 16px 10px 8px;
}
.sp-co-section {
    background: #fff;
    border: 1px solid #BCBEC0;
    border-radius: 4px;
    padding: 14px 16px 6px;
}
.sp-co-section .sp-checkout-form { padding: 8px 0 8px; max-width: none; }
.sp-co-title {
    margin: 0 0 2px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #231F20;
}
.sp-co-step {
    display: inline-block;
    width: 22px; height: 22px; line-height: 22px;
    margin-right: 6px;
    border-radius: 50%;
    background: #E01A2C; color: #fff;
    text-align: center; font-size: 1.2rem;
}
.sp-co-help { margin: 0; color: #6b6b6b; font-size: 1.3rem; }
.sp-checkout-form .sp-field-wide { grid-column: 1 / -1; }
/* =============================================================================================
   24. NEW LEAD DOES ONE JOB
   =============================================================================================
   cmcox, 25 Sep 2026: the New Lead form opened in the middle of the Dashboard, with Customer
   Search above it and Quotation Search, My Processes and the brand/part panels below it. The
   openers (#buttonNewLead, the Leads grid's edit button) add body.sp-lead-mode; the form's Close
   removes it. Nothing is removed from the page, so every script that expects those ids still
   finds them. Remember the 10px root: rem x 10 = px. */
body.sp-lead-mode #customersearch,
body.sp-lead-mode #dataPanelUserDetail,
body.sp-lead-mode #brandselection,
body.sp-lead-mode #brandselection2,
body.sp-lead-mode #brandselection3,
body.sp-lead-mode #productgrid,
body.sp-lead-mode #productgrid2,
body.sp-lead-mode #dynamicsearch {
    display: none !important;
}

body.sp-lead-mode #dataPanelLead {
    max-width: 1100px;
    margin: 24px auto 48px;
    text-align: left;
}

body.sp-lead-mode #dataPanelLead > .row > .container.col-md-12 {
    float: none;
    width: 100%;
}

/* =============================================================================================
   25. SITE ADMIN AS A CARD GRID
   =============================================================================================
   Four uploaders (price matrix, menu manager, competitor pricing, model BOM) were three h1
   sections of half-width panels plus an empty "Blank" panel, with icon-only template buttons in
   two colours and three colours of upload button. Now: one grid of equal cards, one button
   vocabulary - Add files (default), Start upload (primary), Cancel (link), Delete (danger, set
   apart). Markup ids are unchanged; this section only lays them out. */
.sp-admin {
    padding: 8px 4px 32px;
}

.sp-admin-head h1 {
    margin: 4px 0 4px;
}

.sp-admin-head p {
    margin: 0 0 20px;
    color: #6f6866;
    font-size: 1.4rem;
}

.sp-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.sp-admin-grid > .sp-admin-cell > .panel {
    margin-bottom: 0;
    height: 100%;
}

.sp-admin-grid .panel-heading .heading-elements .btn + .btn {
    margin-left: 6px;
}

.sp-admin-grid .panel-body > .row > [class*="col-lg-"] {
    float: none;
    width: 100%;
    margin-bottom: 10px;
}

.sp-admin-grid .dz-clickable.btn-success {
    background: #ffffff;
    border-color: #d6d1cf;
    color: #231F20;
}

.sp-admin-grid .panel-body > .row .btn.cancel {
    background: transparent;
    border-color: transparent;
    color: #6f6866;
    box-shadow: none;
}

.sp-admin-grid .panel-body > .row .text-right {
    border-top: 1px solid #ece8e7;
    padding-top: 12px;
    margin-top: 4px;
}

.sp-admin-wide {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .sp-admin-grid { grid-template-columns: 1fr; }
}

/* =============================================================================================
   26. MODALS: A VISIBLE CLOSE, AND THE ACTION BUTTONS ALWAYS ON SCREEN
   =============================================================================================
   Esc and the injected close button come from ~/Scripts/SmartParts/spl-modal.js. This half keeps
   a tall modal inside the viewport: the body scrolls, the header and the footer (where Save /
   Confirm live) do not, so a long form can no longer push its own buttons below the fold.
   Scoped to .sp-workbench (set only by the SmartParts layouts): antworks.css is linked by every
   area on both tenants, and iSuppli, Warehouse and Purchasing modals are not part of this change. */
.sp-workbench .modal-dialog {
    margin-top: 30px;
    margin-bottom: 30px;
}

.sp-workbench .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
}

.sp-workbench .modal-content > .modal-body,
.sp-workbench .modal-content > form > .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.sp-workbench .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sp-workbench .modal-header .close {
    font-size: 2.6rem;
    line-height: 1;
    opacity: .55;
    margin: -2px 0 0 12px;
}

.sp-workbench .modal-header .close:hover,
.sp-workbench .modal-header .close:focus {
    opacity: .9;
}

/* =============================================================================================
   25. iSUPPLI LOOKS LIKE THE RETURNS PORTAL (T27, 26 Sep 2026 - "ensure menu/nav matches and
   logo/headers"). Scoped to body.spl-shell-isuppli, so SmartParts, Big Brother and the sign-in
   pages keep their own chrome. Same colours, font and shapes as the Returns header and sidebar:
   white bar with a hairline under it, ink text, SPL red only for the current item.
   ============================================================================================= */
body.spl-shell-isuppli,
body.spl-shell-isuppli .navbar,
body.spl-shell-isuppli .sidebar,
body.spl-shell-isuppli .page-header {
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}
body.spl-shell-isuppli .navbar-inverse {
    background: #ffffff;
    border-color: #e5e7eb;
    border-width: 0 0 1px 0;
    box-shadow: none;
}
body.spl-shell-isuppli .navbar-inverse .navbar-brand,
body.spl-shell-isuppli .navbar-inverse .navbar-brand:hover,
body.spl-shell-isuppli .navbar-inverse .navbar-text,
body.spl-shell-isuppli .navbar-inverse .navbar-text a,
body.spl-shell-isuppli .navbar-inverse .navbar-text label,
body.spl-shell-isuppli .navbar-inverse .navbar-text i,
body.spl-shell-isuppli .navbar-inverse .navbar-nav > li > a {
    color: #231F20;
}
body.spl-shell-isuppli .navbar-inverse .navbar-text a:hover { color: #E01A2C; text-decoration: none; }
body.spl-shell-isuppli .navbar-inverse .navbar-text label { cursor: pointer; font-weight: 500; }
body.spl-shell-isuppli .navbar .spl-nav-title { font-weight: 700; color: #231F20; }
body.spl-shell-isuppli .navbar .spl-product-switcher .spl-product-link { color: #231F20; font-weight: 500; }
body.spl-shell-isuppli .navbar .spl-product-switcher .spl-product-link:hover,
body.spl-shell-isuppli .navbar .spl-product-switcher .spl-product-link:focus { background: #f3f4f6; color: #231F20; }
body.spl-shell-isuppli .navbar-inverse .navbar-toggle,
body.spl-shell-isuppli .navbar-inverse .navbar-toggle:hover { background: transparent; color: #231F20; border-color: #e5e7eb; }

/* Sidebar: white, a hairline on the right, section labels in small grey capitals, the current
   page in SPL red on a pale red wash - the Returns sidebar's look, on iSuppli's own menu. */
body.spl-shell-isuppli .sidebar,
body.spl-shell-isuppli .sidebar-main,
body.spl-shell-isuppli .sidebar .sidebar-content {
    background: #ffffff;
    color: #231F20;
}
body.spl-shell-isuppli .sidebar-main { border-right: 1px solid #e5e7eb; box-shadow: none; }
body.spl-shell-isuppli .sidebar .navigation li > a,
body.spl-shell-isuppli .sidebar .navigation li > a > i { color: #231F20; }
body.spl-shell-isuppli .sidebar .navigation li > a { border-radius: 6px; margin: 1px 8px; }
body.spl-shell-isuppli .sidebar .navigation li > a:hover,
body.spl-shell-isuppli .sidebar .navigation li > a:focus { background: #f3f4f6; color: #231F20; border-left-color: transparent; }
body.spl-shell-isuppli .sidebar .navigation > li.active > a,
body.spl-shell-isuppli .sidebar .navigation li.active > a,
body.spl-shell-isuppli .sidebar .navigation li.active > a:hover {
    background: #FDE8EA;
    color: #E01A2C;
    font-weight: 600;
    border-left-color: transparent;
}
body.spl-shell-isuppli .sidebar .navigation li.active > a > i { color: #E01A2C; }
body.spl-shell-isuppli .sidebar .navigation > .navigation-header,
body.spl-shell-isuppli .sidebar .navigation > .navigation-header > span {
    color: #6D6E71;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.spl-shell-isuppli .sidebar .navigation li ul { background: #ffffff; }
body.spl-shell-isuppli .sidebar .navigation li ul li a { color: #231F20; }

/* 25b. Lab feedback, 28 Sep 2026 (cmcox).
   "Grey strip above the header": body{padding-top:44px} (top of this file) reserves room for a
   FIXED navbar; the iSuppli bar is not fixed, so the 44px showed as a grey band above it.
   "Content hugs the left": .content-wrapper only ever had a right gutter (section 1), so page
   content started right at the sidebar's hairline, and the theme's 20px sidebar padding-right was
   dead white space on the menu's side of that line instead of the content's. One 24px gutter on
   both sides now, and the title bar drops its own 20px inset so the page title, the page's
   heading and its first card or table all start on the same left edge. */
body.spl-shell-isuppli { padding-top: 0; }
/* 28 Sep 2026: SmartParts had the same 44px grey strip above its (non-fixed) header. */
body.spl-shell-smartparts { padding-top: 0; }
/* 28 Sep 2026 (evening), cmcox: "layout locks to left on open quotes. same problem as we saw in
   isuppli earlier. guessing this is everywhere? fix". It was everywhere: section 1 gives every
   .content-wrapper a right gutter only. So the 24px two-sided gutter is now global: SmartParts,
   Warehouse, Purchasing, Admin and Part Store get what iSuppli got, and .sp-workbench (section 20)
   moves from 20px to the same 24px. */
.sidebar { padding-right: 0; }
.content-wrapper { padding-left: 24px; padding-right: 24px; }
.content-wrapper > .page-header .page-header-content { padding-left: 0; padding-right: 0; }

/* 28 Sep 2026 night: the header names the product you are in (mark + bold name), and the sister product is an
   outlined pill with an arrow - the mirror image of the Returns header. Replaces the "iSuppli | Returns" tabs. */
.navbar .spl-brandbar { display: flex; align-items: center; height: 46px; }
.navbar .spl-brandbar .navbar-brand { display: flex; align-items: center; gap: 10px; padding-right: 0; }
body.spl-shell-isuppli .navbar .spl-nav-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #231F20; }
.navbar .spl-brandbar-rule { display: inline-block; width: 1px; height: 20px; background: #e5e7eb; margin: 0 16px; }
.navbar .spl-sister-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 999px;
  background: #fff; color: #231F20; font-size: 13px; font-weight: 500; line-height: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s, color .15s; }
.navbar .spl-sister-link i { color: #E01A2C; font-size: 12px; transition: transform .15s; }
.navbar .spl-sister-link:hover, .navbar .spl-sister-link:focus { border-color: #E01A2C; color: #E01A2C; text-decoration: none; }
.navbar .spl-sister-link:hover i { transform: translateX(2px); }

/* 25c. iSuppli = Returns (29 Sep 2026, cmcox T71: "If you playwright it, you'll see the font and the icons differ
   between them, as do the styling/h1/etc on the pages. Should be seamless.").
   Measured both apps with ONE Playwright style fingerprint (E:\CM\mailshots_20260928\uiprobe): the typeface was already
   Inter in both, but iSuppli's menu was 16px dark text with no icons where Returns has 14px grey text with 16px Lucide
   icons and a pale-red pill for the current page; iSuppli's page title was an 18px h4 where Returns has a 30px bold h1;
   iSuppli sat on a picture of grey polygons where Returns sits on white. These rules give iSuppli the Returns values
   exactly (Returns tailwind: gray-500 #6b7280, primary-50 #fef2f3, primary-600 #C41625, border #e5e7eb, radius 8px).
   The icons themselves come from spl-icons.js - the same Lucide set Returns draws. */
body.spl-shell-isuppli .smartparts-background,
body.spl-shell-isuppli .page-container,
body.spl-shell-isuppli .content-wrapper { background-color: #ffffff; background-image: none; }

body.spl-shell-isuppli .sidebar .navigation > li > a {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 500; line-height: 20px; color: #6b7280;
    padding: 8px 12px; margin: 2px 8px; border-radius: 8px;
}
body.spl-shell-isuppli .sidebar .navigation > li > a > span { flex: 1 1 auto; }
body.spl-shell-isuppli .sidebar .navigation > li > a > .spl-ico { flex: 0 0 16px; color: inherit; }
body.spl-shell-isuppli .sidebar .navigation > li > a:hover,
body.spl-shell-isuppli .sidebar .navigation > li > a:focus { background: #f3f4f6; color: #C41625; }
body.spl-shell-isuppli .sidebar .navigation > li.active > a,
body.spl-shell-isuppli .sidebar .navigation > li.active > a:hover { background: #fef2f3; color: #C41625; font-weight: 500; }
body.spl-shell-isuppli .sidebar .navigation li ul li a {
    font-size: 14px; font-weight: 400; color: #6b7280; padding: 7px 12px 7px 48px; margin: 1px 8px; border-radius: 8px;
}
body.spl-shell-isuppli .sidebar .navigation li ul li a:hover,
body.spl-shell-isuppli .sidebar .navigation li ul li.active > a { background: #f3f4f6; color: #C41625; }

/* The page title: one size, one weight, on every page - Returns' h1 (text-3xl, bold). */
body.spl-shell-isuppli .page-header .page-title h4 {
    font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #231F20;
}
body.spl-shell-isuppli .page-header .page-title h4 .text-semibold { font-weight: 700; }
body.spl-shell-isuppli .page-header .page-title h4 .sp-back { font-size: 20px; vertical-align: 3px; }
body.spl-shell-isuppli .page-header.spl-no-title { display: none; }

/* Cards and panels: the Returns card (white, hairline border, 8px radius, the faintest shadow). */
body.spl-shell-isuppli .panel { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
/* 30 Sep 2026: the hairline grey only on neutral panels - .panel-danger / -warning / -primary keep their colour. */
body.spl-shell-isuppli .panel-default, body.spl-shell-isuppli .panel-flat, body.spl-shell-isuppli .panel-white { border-color: #e5e7eb; }
body.spl-shell-isuppli .panel > .panel-heading { border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* The header's right-hand end, as in Returns: a muted welcome line, then the 32px red avatar that opens the menu. */
body.spl-shell-isuppli .navbar-text.navbar-right { display: flex; align-items: center; gap: 16px; }
body.spl-shell-isuppli .navbar .spl-welcome { font-size: 14px; color: #6b7280; }
body.spl-shell-isuppli .navbar .spl-account { cursor: pointer; margin: 0; display: inline-flex; }
body.spl-shell-isuppli .navbar .spl-avatar {
    width: 32px; height: 32px; border-radius: 9999px; background: #E01A2C; color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1;
}
body.spl-shell-isuppli .navbar .spl-account:hover .spl-avatar,
body.spl-shell-isuppli .navbar .spl-account:focus .spl-avatar { box-shadow: 0 0 0 3px rgba(224, 26, 44, .18); }
/* Sidebar width: Returns' lg:w-64 (256px). */
body.spl-shell-isuppli .sidebar-main { width: 256px; }
/* Second pass after the side-by-side screenshots (29 Sep 2026): the theme's 44px min-height made every menu row taller
   than Returns'; the navbar text margins made the header 57px (Returns 54px); the body itself was still the warm grey. */
body.spl-shell-isuppli { background-color: #ffffff; }
body.spl-shell-isuppli .sidebar .navigation > li > a { min-height: 0; }
body.spl-shell-isuppli .sidebar .navigation li ul li a { min-height: 0; }
body.spl-shell-isuppli .navbar { min-height: 54px; }
body.spl-shell-isuppli .navbar .navbar-text { margin-top: 0; margin-bottom: 0; min-height: 54px; }