/* =====================================================================
   Raw Material Formula - module styling
   Loaded globally from App.razor: dialog content (FormulaAction_Form)
   renders outside the owning component's scope, so a scoped .razor.css
   would never reach it. Same reason tender.css and so.css are global.

   Every selector is namespaced .rmf-* and every value comes from the
   --erp-* tokens in erp-theme.css. Nothing here invents a colour, a
   radius or a spacing step, so the module inherits the application's
   palette automatically - including anything the theme changes later.

   THE ONE RULE THAT MATTERS MOST: .rmf-field.
   This build of Microsoft.FluentUI renders a component's Label as a
   SIBLING <label>, not a child:

       <label for="x">Batch Size</label>
       <fluent-number-field id="x">

   Dropped straight into a CSS grid that is TWO grid items, so the label
   lands in one column and its input in the next. That is what made the
   old form look scrambled. Every labelled Fluent control is wrapped in
   .rmf-field so the pair counts as one item. tender.css learned this
   first; the comment is repeated because it is invisible in the markup.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PAGE SHELL
   --------------------------------------------------------------------- */
.rmf-page {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    min-width: 0;
    padding: var(--erp-space-3);
    font-family: var(--erp-font);
    color: var(--erp-text);
    background: var(--erp-page);
}

.rmf-page *,
.rmf-page *::before,
.rmf-page *::after { box-sizing: border-box; }

/* A grid or flex child defaults to min-width:auto and refuses to shrink,
   which is how a wide table pushes the whole page sideways. */
.rmf-page > *,
.rmf-grid > *,
.rmf-toolbar > * { min-width: 0; }

/* ---------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------- */
.rmf-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--erp-space-4);
    flex-wrap: wrap;
    padding: var(--erp-space-3) var(--erp-space-4);
    background: linear-gradient(135deg, var(--erp-surface), var(--erp-blue-50));
    border: 1px solid var(--erp-border);
    border-left: 3px solid var(--erp-blue-700);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
}

.rmf-heading { display: flex; align-items: flex-start; gap: var(--erp-space-3); min-width: 0; }

.rmf-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    margin-top: 2px;
    color: var(--erp-nav-icon);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.rmf-back:hover { background: var(--erp-nav-hover); border-color: var(--erp-border-strong); }

.rmf-crumb {
    margin: 0 0 2px;
    color: var(--erp-text-muted);
    font-size: 11px;
    letter-spacing: .01em;
}

.rmf-titlerow { display: flex; align-items: center; gap: var(--erp-space-2); flex-wrap: wrap; }

.rmf-title {
    margin: 0;
    color: var(--erp-text);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.rmf-sub { margin: 3px 0 0; color: var(--erp-text-muted); font-size: 11.5px; }

.rmf-actions { display: flex; align-items: center; gap: var(--erp-space-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   CHIPS AND BADGES
   --------------------------------------------------------------------- */
.rmf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    color: var(--erp-text-secondary);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-pill);
    font-size: 10.5px;
    font-weight: 650;
    white-space: nowrap;
}

.rmf-chip-code {
    color: var(--erp-blue-800);
    background: var(--erp-blue-75);
    border-color: var(--erp-blue-100);
    font-variant-numeric: tabular-nums;
}

.rmf-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: var(--erp-radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Soft fills rather than saturated blocks: a register of 25 rows with
   solid badges reads as a colour chart, not a list. */
.rmf-st-1 { color: var(--erp-info);    background: var(--erp-info-soft);    border-color: var(--erp-info-border); }
.rmf-st-2 { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: var(--erp-warning-border); }
.rmf-st-3 { color: var(--erp-info);    background: var(--erp-info-soft);    border-color: var(--erp-info-border); }
.rmf-st-4 { color: var(--erp-success); background: var(--erp-success-soft); border-color: var(--erp-success-border); }
.rmf-st-5 { color: var(--erp-danger);  background: var(--erp-danger-soft);  border-color: var(--erp-danger-border); }
.rmf-st-6 { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: var(--erp-warning-border); }
.rmf-st-7 { color: var(--erp-text-muted); background: var(--erp-surface-muted); border-color: var(--erp-border-strong); }

/* ---------------------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------------------- */
.rmf-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--erp-space-3);
    flex-wrap: wrap;
    padding: var(--erp-space-3);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
}

.rmf-toolbar-search { flex: 1 1 300px; max-width: 460px; }
.rmf-toolbar-spacer { flex: 1 1 auto; }

.rmf-count {
    padding: 4px 10px;
    color: var(--erp-info);
    background: var(--erp-info-soft);
    border: 1px solid var(--erp-info-border);
    border-radius: var(--erp-radius-pill);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   FIELD WRAPPER  (see the header note - this is load bearing)
   --------------------------------------------------------------------- */
.rmf-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.rmf-field > label {
    color: var(--erp-text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: .01em;
}

.rmf-field > label .rmf-req { margin-left: 2px; color: var(--erp-danger); }

.rmf-field fluent-text-field,
.rmf-field fluent-number-field,
.rmf-field fluent-select,
.rmf-field fluent-text-area,
.rmf-field fluent-date-picker { width: 100%; }

/* A read-only field should look settled, not disabled-and-broken. */
.rmf-readonly {
    display: flex;
    align-items: center;
    min-height: var(--erp-control-height);
    padding: 0 10px;
    color: var(--erp-text);
    background: var(--erp-surface-muted);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   CARDS / SECTIONS
   --------------------------------------------------------------------- */
/* overflow is VISIBLE on purpose. With overflow:hidden every picker that
   opens near the bottom of a card (the Final Item add row, the Order Type
   multi-select) was clipped, and the scroll wrapper underneath grew a
   scrollbar - which re-flowed the table columns. That was the "columns
   shift when I pick Packing / Order Type" bug. Rounded corners are kept
   by radiusing the first and last children instead. */
.rmf-card {
    min-width: 0;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    overflow: visible;
}

.rmf-card > :first-child {
    border-top-left-radius: var(--erp-radius-lg);
    border-top-right-radius: var(--erp-radius-lg);
}

.rmf-card > :last-child {
    border-bottom-left-radius: var(--erp-radius-lg);
    border-bottom-right-radius: var(--erp-radius-lg);
}

.rmf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
    min-height: 40px;
    padding: var(--erp-space-2) var(--erp-space-4);
    background: linear-gradient(180deg, var(--erp-surface), var(--erp-surface-subtle));
    border-bottom: 1px solid var(--erp-border);
}

.rmf-card-title {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    margin: 0;
    color: var(--erp-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* A 3px accent bar reads as a section marker at a glance without adding
   another border or another colour. */
.rmf-card-title::before {
    content: "";
    width: 3px; height: 14px;
    background: var(--erp-blue-700);
    border-radius: var(--erp-radius-pill);
}

.rmf-card-body { padding: var(--erp-space-4); }
.rmf-card-body.flush { padding: 0; }

/* ---------------------------------------------------------------------
   IDENTITY STRIP - brand / generic of the selected item
   --------------------------------------------------------------------- */
.rmf-identity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--erp-space-4);
    padding: var(--erp-space-3) var(--erp-space-4);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-left: 3px solid var(--erp-nav-accent-2);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
}

.rmf-identity dt {
    margin: 0 0 2px;
    color: var(--erp-text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rmf-identity dd {
    margin: 0;
    color: var(--erp-text);
    font-size: 12.5px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   FORM GRID
   --------------------------------------------------------------------- */
.rmf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--erp-space-3) var(--erp-space-4);
    align-items: end;
}

.rmf-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rmf-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rmf-span-2 { grid-column: span 2; }
.rmf-span-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------
   HEADER GROUPS - Product / Batch & specification / Order types
   --------------------------------------------------------------------- */
.rmf-group {
    padding-bottom: var(--erp-space-4);
    margin-bottom: var(--erp-space-4);
    border-bottom: 1px dashed var(--erp-border);
}
.rmf-group-last { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.rmf-group-title {
    margin: 0 0 var(--erp-space-3);
    color: var(--erp-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rmf-align-start { align-items: start; }
.rmf-field-block { min-width: 0; }

.rmf-hint { margin: 5px 0 0; color: var(--erp-text-muted); font-size: 11px; }
.rmf-hint-warn { color: var(--erp-warning); font-weight: 600; }

/* ---------------------------------------------------------------------
   MULTI-SELECT DROPDOWN  (Components/Pages/Components/MultiSelectDropdown)
   --------------------------------------------------------------------- */
.msd { position: relative; min-width: 0; }

.msd-label {
    display: block;
    margin-bottom: 3px;
    color: var(--erp-text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}
.msd-req { margin-left: 2px; color: var(--erp-danger); }

.msd-control {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    min-height: var(--erp-control-height);
    padding: 3px 28px 3px 8px;
    position: relative;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.msd-control:hover { border-color: var(--erp-blue-700); }
.msd-control:focus-visible,
.msd.is-open .msd-control {
    outline: none;
    border-color: var(--erp-blue-700);
    box-shadow: 0 0 0 2px var(--erp-blue-100);
}
.msd.is-disabled .msd-control { cursor: default; background: var(--erp-surface-muted); }
.msd.is-disabled .msd-control:hover { border-color: var(--erp-border-strong); }

.msd-values { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.msd-placeholder { color: var(--erp-text-muted); font-size: 12px; }

.msd-caret {
    position: absolute;
    right: 9px; top: 50%;
    transform: translateY(-50%);
    color: var(--erp-text-muted);
    font-size: 11px;
}

.msd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 4px 1px 8px;
    color: var(--erp-blue-800);
    background: var(--erp-blue-75);
    border: 1px solid var(--erp-blue-100);
    border-radius: var(--erp-radius-pill);
    font-size: 11px;
    font-weight: 650;
    line-height: 18px;
}
.msd-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msd-chip.is-primary { border-color: var(--erp-blue-700); }
.msd-chip-tag {
    padding: 0 5px;
    color: var(--foreground-on-accent-rest, #fff);
    background: var(--erp-blue-700);
    border-radius: var(--erp-radius-pill);
    font-size: 8.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.msd-chip-x {
    width: 16px; height: 16px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 13px;
    line-height: 14px;
    cursor: pointer;
}
.msd-chip-x:hover { background: var(--erp-blue-100); }

.msd-backdrop { position: fixed; inset: 0; z-index: 1990; }

.msd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2000;
    width: 100%;
    min-width: 240px;
    padding: var(--erp-space-2);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-md, 0 8px 24px rgba(0,0,0,.14));
}

.msd-search {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    color: var(--erp-text);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
    outline: none;
}
.msd-search:focus { border-color: var(--erp-blue-700); }

.msd-tools { display: flex; gap: var(--erp-space-3); padding: 6px 2px 4px; }
.msd-link {
    padding: 0;
    color: var(--erp-blue-700);
    background: none;
    border: 0;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}
.msd-link:hover { text-decoration: underline; }

.msd-list { max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }

.msd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
    cursor: pointer;
}
.msd-option:hover { background: var(--erp-row-hover); }
.msd-option.is-selected { color: var(--erp-blue-800); font-weight: 650; }

.msd-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px; height: 16px;
    color: var(--foreground-on-accent-rest, #fff);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
}
.msd-option.is-selected .msd-check { background: var(--erp-blue-700); border-color: var(--erp-blue-700); }

.msd-empty { padding: 10px 8px; color: var(--erp-text-muted); font-size: 12px; font-style: italic; }

.msd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    color: var(--erp-text-muted);
    border-top: 1px solid var(--erp-border);
    font-size: 11px;
}
.msd-done {
    padding: 3px 12px;
    color: var(--foreground-on-accent-rest, #fff);
    background: var(--erp-blue-700);
    border: 0;
    border-radius: var(--erp-radius-sm);
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
}
.msd-done:hover { background: var(--erp-blue-800); }

/* ---------------------------------------------------------------------
   ORDER TYPE PICKER (legacy checkbox list - superseded by the multi-select
   dropdown above; kept so nothing else that borrowed these classes breaks)
   --------------------------------------------------------------------- */
.rmf-ot { margin-top: var(--erp-space-4); }

.rmf-ot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-space-2);
}

.rmf-ot-label { color: var(--erp-text-secondary); font-size: 11px; font-weight: 650; }
.rmf-ot-sum   { color: var(--erp-text-muted);     font-size: 11px; text-align: right; }

.rmf-ot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px var(--erp-space-4);
    max-height: 132px;
    padding: var(--erp-space-2) var(--erp-space-3);
    overflow-y: auto;
    background: var(--erp-surface-subtle);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
}

.rmf-primary {
    margin-left: 6px;
    padding: 0 6px;
    color: var(--foreground-on-accent-rest, #fff);
    background: var(--erp-blue-700);
    border-radius: var(--erp-radius-pill);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   TABLES
   --------------------------------------------------------------------- */
.rmf-tablewrap {
    overflow: auto;
    max-height: 62vh;
    background: var(--erp-surface);
    border-top: 1px solid var(--erp-border);
}

.rmf-tablewrap.inner { max-height: 48vh; border-top: 0; }

.rmf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.rmf-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    color: var(--erp-text-secondary);
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-border-strong);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.rmf-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--erp-border-soft);
    vertical-align: middle;
}

.rmf-table tbody tr:nth-child(even) > td { background: var(--erp-row-alt); }
.rmf-table tbody tr:hover > td           { background: var(--erp-row-hover); }
.rmf-table tbody tr:last-child > td      { border-bottom: 0; }

.rmf-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rmf-table .strong { color: var(--erp-text); font-weight: 650; }
.rmf-table .muted  { color: var(--erp-text-muted); }
.rmf-table .nowrap { white-space: nowrap; }

/* Long generic and brand names are the norm here, not the exception.
   Clamping keeps the row height even instead of letting one product
   name set the height of the whole register. */
.rmf-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 320px;
    overflow: hidden;
}

.rmf-seq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 5px;
    color: var(--erp-text-muted);
    background: var(--erp-surface-muted);
    border-radius: var(--erp-radius-sm);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.rmf-link {
    color: var(--erp-blue-700);
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.rmf-link:hover { color: var(--erp-blue-800); text-decoration: underline; }

.rmf-rowactions { display: flex; gap: 2px; justify-content: flex-end; }

/* The inline add row and the inline edit row */
.rmf-row-add > td  { background: var(--erp-blue-50) !important; }
.rmf-row-edit > td { background: var(--erp-warning-soft) !important; }
.rmf-row-edit > td:first-child { box-shadow: inset 3px 0 0 var(--erp-warning); }

.rmf-yes { color: var(--erp-success); font-weight: 700; font-size: 10.5px; }
.rmf-no  { color: var(--erp-text-muted); font-weight: 600; font-size: 10.5px; }

/* ---------------------------------------------------------------------
   PICKERS INSIDE GRIDS
   GenericPopup always renders its <label>, even when Label="" - an empty
   block that pushed every picker cell a few pixels lower than the number
   and text fields beside it. Inside a table it is hidden, and the input
   is given the same height as the Fluent controls so a row is one line.
   --------------------------------------------------------------------- */
.rmf-table .fluent-popup-root > .fluent-label { display: none; }

.rmf-table .fluent-input-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--erp-control-height, 32px);
    max-width: 100%;
    background: var(--erp-surface);
}

.rmf-table .fluent-input { min-width: 0; background: transparent; text-overflow: ellipsis; }
.rmf-table .fluent-popup { min-width: 100%; }

/* The material grid is wide and must scroll sideways. Reserving the
   scrollbar gutter means a picker opening inside it can no longer make a
   vertical scrollbar appear and steal width from the columns. */
.rmf-stable { scrollbar-gutter: stable; }

/* ---------------------------------------------------------------------
   FINAL ITEM / OUTPUT GRID
   Fixed table layout with a colgroup: column widths come from the
   <col>s, never from the content, so choosing a long item, a packing or
   an order type cannot move the columns.
   --------------------------------------------------------------------- */
.rmf-card-open { overflow: visible; }

.rmf-fi-wrap { overflow: visible; }

.rmf-fi-table { table-layout: fixed; min-width: 0; }
.rmf-fi-table col.c-item { width: 36%; }
.rmf-fi-table col.c-pack { width: 18%; }
.rmf-fi-table col.c-qty  { width: 20%; }
.rmf-fi-table col.c-ot   { width: 16%; }
.rmf-fi-table col.c-act  { width: 116px; }

.rmf-fi-table th,
.rmf-fi-table td { overflow: visible; }

.rmf-fi-table thead th { position: static; }
.rmf-fi-table .rmf-clamp { max-width: none; }

/* the last pickers open leftwards so they stay on screen */
.rmf-fi-table td:nth-child(4) .fluent-popup,
.rmf-fi-table td:nth-child(3) .fluent-popup { left: auto; right: 0; }

.rmf-table th.act,
.rmf-table td.act { text-align: right; white-space: nowrap; }

.rmf-qty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(70px, 44%);
    gap: 6px;
    align-items: center;
}
.rmf-qty fluent-number-field { width: 100%; min-width: 0; }
.rmf-qty > * { min-width: 0; }

.rmf-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rmf-fi-coverage { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.rmf-chip-ok   { color: var(--erp-success); background: var(--erp-success-soft); border-color: var(--erp-success-border); }
.rmf-chip-warn { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: var(--erp-warning-border); }

.rmf-banner-inset { margin: var(--erp-space-3) var(--erp-space-4) 0; }

/* ---------------------------------------------------------------------
   REGISTER - KPI tiles, chip lists, pinned actions
   --------------------------------------------------------------------- */
.rmf-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--erp-space-3);
}

.rmf-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--erp-space-3) var(--erp-space-4);
    color: var(--erp-text);
    text-align: left;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-top: 3px solid var(--erp-blue-700);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.rmf-kpi:hover { border-color: var(--erp-border-strong); transform: translateY(-1px); }
.rmf-kpi.is-on { box-shadow: 0 0 0 2px var(--erp-blue-100), var(--erp-shadow-sm); }
.rmf-kpi.k-draft  { border-top-color: var(--erp-info); }
.rmf-kpi.k-review { border-top-color: var(--erp-warning); }
.rmf-kpi.k-eff    { border-top-color: var(--erp-success); }

.rmf-kpi-label {
    color: var(--erp-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.rmf-kpi-value { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }

.rmf-chiplist { display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }

/* Actions stay in view while the wide register scrolls sideways. */
.rmf-register .sticky-act {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--erp-surface);
    box-shadow: inset 1px 0 0 var(--erp-border);
}
.rmf-register thead .sticky-act { z-index: 3; background: var(--erp-surface-muted); }
.rmf-register tbody tr:nth-child(even) > td.sticky-act { background: var(--erp-row-alt); }
.rmf-register tbody tr:hover > td.sticky-act { background: var(--erp-row-hover); }

/* ---------------------------------------------------------------------
   FOOTER / PAGER
   --------------------------------------------------------------------- */
.rmf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
    flex-wrap: wrap;
    padding: var(--erp-space-2) var(--erp-space-4);
    color: var(--erp-text-muted);
    background: var(--erp-surface-subtle);
    border-top: 1px solid var(--erp-border);
    font-size: 11.5px;
}

.rmf-pager { display: flex; align-items: center; gap: var(--erp-space-1); }
.rmf-pager-page { padding: 0 var(--erp-space-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   STATES AND BANNERS
   --------------------------------------------------------------------- */
.rmf-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--erp-space-2);
    padding: 52px var(--erp-space-4);
    color: var(--erp-text-muted);
    text-align: center;
}
.rmf-state strong { color: var(--erp-text-secondary); font-size: 13px; }
.rmf-state span   { font-size: 11.5px; }

.rmf-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--erp-space-3);
    padding: var(--erp-space-3) var(--erp-space-4);
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--erp-radius-md);
    font-size: 12px;
}
.rmf-banner div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rmf-banner strong { font-weight: 700; }

.rmf-banner-lock { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: var(--erp-warning-border); border-left-color: var(--erp-warning); }
.rmf-banner-info { color: var(--erp-info);    background: var(--erp-info-soft);    border-color: var(--erp-info-border);    border-left-color: var(--erp-info); }
.rmf-banner-err  { color: var(--erp-danger);  background: var(--erp-danger-soft);  border-color: var(--erp-danger-border);  border-left-color: var(--erp-danger); }

.rmf-validation { display: flex; flex-direction: column; gap: var(--erp-space-1); }

/* ---------------------------------------------------------------------
   ENTRY PANEL  (ingredient lines + final items)
   Rows are keyed in a labelled panel under each grid, not inline in the
   table: inside the scrolling table every picker was squeezed to its
   column width and its drop-down was cut off by the scroll container.
   The panel sits outside the scroll wrapper (the card is overflow:visible),
   so every list opens full width and fully visible.
   Blue = adding a new row. Amber = editing the highlighted row.
   --------------------------------------------------------------------- */
.rmf-editor {
    margin: var(--erp-space-3) var(--erp-space-4) var(--erp-space-4);
    padding: var(--erp-space-3) var(--erp-space-4) var(--erp-space-4);
    background: var(--erp-blue-50);
    border: 1px solid var(--erp-blue-100);
    border-left: 3px solid var(--erp-blue-600);
    border-radius: var(--erp-radius-md);
    outline: none;
    scroll-margin: 80px;
}

.rmf-editor.is-edit {
    background: var(--erp-warning-soft);
    border-color: var(--erp-warning-border);
    border-left-color: var(--erp-warning);
}

.rmf-editor:focus-visible { box-shadow: 0 0 0 2px var(--erp-focus); }

.rmf-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--erp-space-3);
}

.rmf-editor-title {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    color: var(--erp-blue-800);
    font-size: 13px;
    font-weight: 700;
}
.rmf-editor.is-edit .rmf-editor-title { color: var(--erp-warning); }

.rmf-editor-hint { color: var(--erp-text-muted); font-size: 11px; }
.rmf-editor-hint .rmf-req,
.rmf-req { margin-left: 2px; color: var(--erp-danger); }

.rmf-editor-grid { gap: var(--erp-space-3) var(--erp-space-4); }

.rmf-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--erp-space-2);
    margin-top: var(--erp-space-4);
    padding-top: var(--erp-space-3);
    border-top: 1px dashed var(--erp-border);
}

/* GenericPopup in the panel: same label style and control height as the
   Fluent fields beside it, a white input, and a list at least as wide as
   the input (never narrower than a readable 320px). */
.rmf-editor .fluent-popup-root > .fluent-label {
    margin-bottom: 3px;
    color: var(--erp-text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.rmf-editor .fluent-input-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--erp-control-height, 32px);
    max-width: 100%;
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
}
.rmf-editor .fluent-input-wrapper:focus-within { border-color: var(--erp-blue-700); box-shadow: 0 0 0 1px var(--erp-blue-700); }
.rmf-editor .fluent-input { min-width: 0; background: transparent; font-size: 12.5px; text-overflow: ellipsis; }
.rmf-editor .fluent-popup { min-width: max(100%, 320px); max-width: min(640px, 90vw); z-index: 2100; }
.rmf-editor .fluent-table td { padding: 6px 10px; font-size: 12.5px; }
.rmf-editor .fluent-table tbody tr { cursor: pointer; }
.rmf-editor .fluent-table tbody tr:hover { background: var(--erp-row-hover); }

.rmf-editor fluent-text-field,
.rmf-editor fluent-number-field,
.rmf-editor fluent-select { width: 100%; }

.rmf-checks {
    display: flex;
    align-items: center;
    gap: var(--erp-space-4);
    min-height: var(--erp-control-height, 32px);
}

/* the grid row currently loaded in the panel */
.rmf-table tbody tr.rmf-row-editing > td { background: var(--erp-warning-soft) !important; }
.rmf-table tbody tr.rmf-row-editing > td:first-child { box-shadow: inset 3px 0 0 var(--erp-warning); }

.rmf-subline { margin-top: 1px; color: var(--erp-text-muted); font-size: 11px; }

/* ---------------------------------------------------------------------
   REVISIONS  (RawMaterialFormula_Revisions.razor)
   Full-screen panel: version timeline on top, the selected old version
   and the LATEST version side by side, rows aligned on one grid so a
   line never drifts from its counterpart. Red = removed / old value,
   green = added / new value, hatched = row absent on that side.
   --------------------------------------------------------------------- */
.rmr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    background: rgba(15, 23, 42, .35);
}

.rmr-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-left: auto;
    background: var(--erp-page);
    font-family: var(--erp-font);
    color: var(--erp-text);
    box-shadow: var(--erp-shadow-md);
}

.rmr-head, .rmr-timeline, .rmr-summary { flex: 0 0 auto; }

.rmr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
    padding: var(--erp-space-3) var(--erp-space-5);
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
}
.rmr-head-title { display: flex; align-items: center; gap: var(--erp-space-2); flex-wrap: wrap; min-width: 0; }
.rmr-head-title h2 { margin: 0 var(--erp-space-2) 0 0; font-size: 18px; font-weight: 750; }
.rmr-head-item { color: var(--erp-text-secondary); font-size: 12px; font-weight: 600; }
.rmr-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--erp-danger);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    cursor: pointer;
}
.rmr-close:hover { background: var(--erp-danger-soft); border-color: var(--erp-danger-border); }

/* timeline */
.rmr-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
    padding: var(--erp-space-3) var(--erp-space-4);
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-border);
}
.rmr-month { margin: 0 var(--erp-space-1) 0 var(--erp-space-3); color: var(--erp-text-muted); font-size: 11.5px; }

.rmr-pill {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 62px;
    padding: 5px 10px 6px;
    color: var(--erp-text-secondary);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    cursor: pointer;
    font: inherit;
    line-height: 1.15;
    transition: background .12s, border-color .12s;
}
.rmr-pill:hover { border-color: var(--erp-blue-600); }
.rmr-pill-ver { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.rmr-pill-date { font-size: 11px; font-weight: 650; text-align: center; color: var(--erp-text); }
.rmr-pill.is-selected { color: #fff; background: var(--erp-navy-900); border-color: var(--erp-navy-900); }
.rmr-pill.is-selected .rmr-pill-date { color: #fff; }
.rmr-pill.is-selected::after {
    content: "";
    position: absolute;
    left: 18%; right: 18%; bottom: -8px;
    height: 2px;
    background: var(--erp-blue-600);
    border-radius: 2px;
}
.rmr-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 7px; height: 7px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: currentColor;
}
.rmr-now {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: var(--erp-space-2);
    padding: 4px 10px;
    color: var(--erp-success);
    background: var(--erp-success-soft);
    border: 1px solid var(--erp-success-border);
    border-radius: var(--erp-radius-md);
    font-size: 11px;
    line-height: 1.25;
}
.rmr-now strong { font-size: 12px; }

/* summary bar */
.rmr-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--erp-space-2) var(--erp-space-4);
    padding: var(--erp-space-2) var(--erp-space-5);
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    font-size: 12px;
}
.rmr-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rmr-tag { padding: 1px 8px; border-radius: var(--erp-radius-pill); font-size: 11px; font-weight: 700; border: 1px solid; }
.rmr-tag.add { color: var(--erp-success); background: var(--erp-success-soft); border-color: var(--erp-success-border); }
.rmr-tag.del { color: var(--erp-danger);  background: var(--erp-danger-soft);  border-color: var(--erp-danger-border); }
.rmr-tag.chg { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: var(--erp-warning-border); }

/* side-by-side grid: every row is two cells, so both sides stay aligned */
.rmr-compare {
    flex: 1 1 auto;
    min-height: 0;          /* let the grid scroll instead of pushing the footer off screen */
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--erp-space-4);
    align-content: start;
    padding: var(--erp-space-3) var(--erp-space-5) var(--erp-space-5);
}

.rmr-colhead {
    position: sticky;
    top: calc(-1 * var(--erp-space-3));
    z-index: 2;
    padding: 10px 14px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg) var(--erp-radius-lg) 0 0;
    box-shadow: var(--erp-shadow-sm);
}
.rmr-colhead.old { border-top: 3px solid var(--erp-danger); }
.rmr-colhead.new { border-top: 3px solid var(--erp-success); }
.rmr-colhead-title { font-size: 11.5px; font-weight: 750; letter-spacing: .03em; text-align: center; }
.rmr-colhead-meta {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 4px 10px; margin-top: 6px;
    color: var(--erp-text-muted); font-size: 11px;
}
.rmr-reason { margin-top: 4px; color: var(--erp-text-secondary); font-size: 11px; font-style: italic; text-align: center; }

.rmr-section {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: var(--erp-space-2);
    margin: var(--erp-space-4) 0 var(--erp-space-1);
    color: var(--erp-text-muted);
    font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.rmr-section::after { content: ""; flex: 1; height: 1px; background: var(--erp-border); }
.rmr-section-count { color: var(--erp-text-secondary); letter-spacing: 0; text-transform: none; font-weight: 650; }

.rmr-cell {
    min-width: 0;
    margin-top: 4px;
    padding: 7px 12px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-soft);
    border-left: 3px solid transparent;
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
}
.rmr-span { grid-column: 1 / -1; text-align: center; }

.rmr-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--erp-space-3); align-items: baseline; }
.rmr-label { color: var(--erp-text-muted); font-size: 11px; font-weight: 650; }
.rmr-value { overflow-wrap: anywhere; font-weight: 600; }

.rmr-row-main { display: flex; align-items: center; gap: var(--erp-space-2); min-width: 0; }
.rmr-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmr-row-qty { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 3px; }
.rmr-row-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; color: var(--erp-text-muted); font-size: 11px; }
.rmr-row-meta > span { padding: 0 4px; border-radius: 3px; }

/* states */
.rmr-cell.is-del     { background: var(--erp-danger-soft);  border-color: var(--erp-danger-border);  border-left-color: var(--erp-danger); }
.rmr-cell.is-add     { background: var(--erp-success-soft); border-color: var(--erp-success-border); border-left-color: var(--erp-success); }
.rmr-cell.is-chg-old { border-left-color: var(--erp-danger); }
.rmr-cell.is-chg-new { border-left-color: var(--erp-success); }
.hl-del { color: var(--erp-danger);  background: var(--erp-danger-soft);  text-decoration: line-through; text-decoration-thickness: 1px; }
.hl-add { color: var(--erp-success); background: var(--erp-success-soft); font-weight: 700; }

.rmr-gap {
    background: repeating-linear-gradient(135deg,
        var(--erp-surface-muted) 0 6px, var(--erp-border-soft) 6px 8px);
    border-style: dashed;
    min-height: 44px;
}

/* footer */
/* a <div>, not <footer>: app.css styles every <footer> as a fixed 22px
   bar with overflow:hidden, which clipped this one */
.rmr-foot {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--erp-space-3);
    padding: var(--erp-space-3) var(--erp-space-5);
    background: var(--erp-surface);
    border-top: 1px solid var(--erp-border);
}
.rmr-foot-note { flex: 1 1 320px; min-width: 0; color: var(--erp-text-muted); font-size: 12px; line-height: 1.4; }
.rmr-foot-actions { display: flex; gap: var(--erp-space-2); flex-wrap: wrap; }

/* inline restore confirmation + error (kept inside the panel: dialogs
   open underneath this full-screen layer) */
.rmr-confirm {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: var(--erp-space-3) var(--erp-space-4);
    padding: var(--erp-space-3) var(--erp-space-5);
    background: var(--erp-warning-soft);
    border-top: 1px solid var(--erp-warning-border);
}
.rmr-confirm-text { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.rmr-confirm-text strong { color: var(--erp-text); font-size: 13px; }
.rmr-confirm-text span { color: var(--erp-text-secondary); line-height: 1.4; }
.rmr-confirm-reason fluent-text-field { width: 100%; }
.rmr-confirm-actions { display: flex; gap: var(--erp-space-2); flex-wrap: wrap; }

.rmr-error {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--erp-space-2);
    padding: 8px var(--erp-space-5);
    color: var(--erp-danger);
    background: var(--erp-danger-soft);
    border-top: 1px solid var(--erp-danger-border);
    font-size: 12px; font-weight: 600;
}

/* formula page: "older version" banner, register helpers */
.rmr-older { align-items: center; }
.rmr-older > div:nth-child(2) { flex: 1 1 auto; }
.rmr-older-actions { display: flex; gap: var(--erp-space-2); flex-wrap: wrap; }
.rmr-verlink { margin-left: 4px; color: var(--erp-blue-700); font-size: 11px; font-weight: 650; text-decoration: none; }
.rmr-verlink:hover { text-decoration: underline; }
.rmf-table tbody tr.rmr-oldrow > td { color: var(--erp-text-muted); background: var(--erp-surface-subtle); }
.rmr-toggle { display: flex; align-items: center; gap: var(--erp-space-2); min-height: var(--erp-control-height, 32px); font-size: 12px; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   Narrow is a real case here: this runs on factory-floor laptops and
   half-width windows next to a batch record.
   --------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .rmf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .rmf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rmf-grid,
    .rmf-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rmf-clamp { max-width: 220px; }
}

@media (max-width: 760px) {
    .rmf-page { padding: var(--erp-space-2); gap: var(--erp-space-2); }
    .rmf-grid,
    .rmf-grid.cols-3,
    .rmf-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
    .rmf-span-2, .rmf-span-full { grid-column: 1 / -1; }
    .rmf-header { flex-direction: column; align-items: stretch; }
    .rmf-actions { justify-content: flex-start; }
    .rmf-toolbar-search { max-width: none; }
    .rmf-footer { justify-content: center; }
    .rmf-tablewrap { max-height: none; }
    .rmf-editor { margin: var(--erp-space-2); padding: var(--erp-space-3); }
    .rmr-compare { grid-template-columns: minmax(0, 1fr); padding: var(--erp-space-2); }
    .rmr-colhead { position: static; }
    .rmr-field { grid-template-columns: 1fr; gap: 2px; }
    .rmr-confirm { grid-template-columns: 1fr; }
    .rmr-head, .rmr-summary, .rmr-foot { padding-left: var(--erp-space-3); padding-right: var(--erp-space-3); }
    .rmf-editor-actions { flex-direction: column-reverse; }
    .rmf-editor-actions fluent-button { width: 100%; }

    /* the Final Item grid stacks into cards on a phone */
    .rmf-fi-table, .rmf-fi-table tbody, .rmf-fi-table tr, .rmf-fi-table td { display: block; width: 100%; }
    .rmf-fi-table thead, .rmf-fi-table colgroup { display: none; }
    .rmf-fi-table tr { padding: var(--erp-space-2) 0; border-bottom: 1px solid var(--erp-border); }
    .rmf-fi-table td { border-bottom: 0; padding: 4px var(--erp-space-3); text-align: left; }
    .rmf-fi-table td.num, .rmf-fi-table td.act { text-align: left; }
}

@media print {
    .rmf-actions, .rmf-toolbar, .rmf-footer, .rmf-rowactions,
    .rmf-row-add, .rmf-row-edit, .rmf-back, .rmf-editor { display: none !important; }
    .rmf-page { padding: 0; background: #fff; }
    .rmf-card, .rmf-header { box-shadow: none; }
    .rmf-tablewrap { max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------------------
   RAW MATERIAL USED IN FORMULA REPORT  (.rmu-*)
   Reports/RawMaterialUsedInFormula_Report.razor, plus the "View only"
   chip shown on /rawmaterialformula/view/{id}.
   --------------------------------------------------------------------- */
.rmu-viewonly {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--erp-blue-700);
    background: var(--erp-surface-subtle);
}

.rmu-toolbar { align-items: flex-end; }
.rmu-picker  { flex: 1 1 340px; max-width: 520px; min-width: 260px; }

.rmu-usedin { display: flex; flex-direction: column; gap: 2px; min-width: 220px; line-height: 1.35; }
.rmu-usedin span   { color: var(--erp-text-secondary); font-size: 11.5px; }
.rmu-usedin strong { color: var(--erp-text); font-weight: 700; }

.rmu-table .rmf-clamp { max-width: 260px; }
.rmu-code { font-size: 12.5px; }

@media (max-width: 760px) {
    .rmu-picker { flex-basis: 100%; max-width: none; min-width: 0; }
    .rmu-usedin { min-width: 160px; }
}