/* Inventory module (/inventory, /inventory/movement) — moved onto the AbenaV3 page shell.
   Mirrors the /progression-plan/management layout: a full-width white header band
   (title left, action buttons right) above a right-aligned filter toolbar, then the grid.
   Loaded after Abena-samples.css in _Host.cshtml, so the overrides below win on equal
   specificity over the pre-redesign .inventory-main-page rule that still lives there. */

/* Typography: re-point --abena-v3-font to Gilroy-Regular for the page + teleported restock drawer. */
.inventory-main-page,
.inventory-movement-page,
.abena-v3-slide-panel:has(.restock-drawer) {
    --abena-v3-font: 'Gilroy-Regular', 'Gilroy', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Location details drawer ── */

/* Wide drawer, edge to edge at ≤1200px. Wider than the order catalogue drawer's 1040px: ten grid columns must fit without horizontal scroll. */
.abena-v3-slide-panel.adjust-inventory-panel {
    width: 77.5rem;
    max-width: 94vw;
}

@media (min-width: 1400px) {
    .abena-v3-slide-panel.adjust-inventory-panel {
        width: 80.625rem;
    }
}

@media (max-width: 1200px) {
    .abena-v3-slide-panel.adjust-inventory-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* Tighter side gutters: every pixel goes to the grids. */
.abena-v3-slide-panel.adjust-inventory-panel .abena-v3-slide-panel__header {
    padding-left: 12px;
    padding-right: 24px;
}

.abena-v3-slide-panel.adjust-inventory-panel .abena-v3-slide-panel__body {
    overflow: hidden;
    padding: 1rem 24px 1rem 12px;
}

.adjust-inventory-drawer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.adjust-inventory-drawer__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

/* Compact cells and two-line headers so the columns fit the drawer. */
.adjust-inventory-drawer .abena-v3-grid .k-grid-header .k-table-th,
.adjust-inventory-drawer .abena-v3-grid .k-table-td {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.adjust-inventory-drawer .abena-v3-grid .k-table-td {
    overflow-wrap: anywhere;
}

.adjust-inventory-drawer .k-grid-header .k-column-title {
    white-space: normal;
}

/* Switch label: Gilroy-Regular written out in full (token doesn't reach the teleported drawer); weight 400 avoids synthetic bold. */
.adjust-inventory-drawer .edit-context-wrapper {
    font-family: 'Gilroy-Regular', 'Gilroy', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--abena-color-page-title);
}

/* Switch rail RED (locked, not a confirmation) — long selector needed to out-specificity Abena-v3.css. */
.adjust-inventory-drawer .abena-v3-switch.adjust-inventory-modal__lock-switch > input:checked + .abena-v3-switch__track {
    background: var(--samples-danger);
}

/* FontAwesome padlock — its size used to come from Telerik's `k-icon-xxl`.
   `display: inline-flex` + `line-height: 1`: with `line-height: normal` the glyph keeps a box
   taller than the switch rail and ends up sitting high despite the parent's `align-items: center`.
   This way the box hugs the glyph and the centring lands right. */
.adjust-inventory-modal .edit-context-wrapper .icon-locked,
.adjust-inventory-modal .edit-context-wrapper .icon-unlocked {
    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1;
}

/* Designation truncated to one line, the full name reaching the reader through the tooltip (same
   pattern as the log's `.inv-mvt-trunc`). The column is the grid's only elastic one: it absorbs
   all the remaining width, so it is the first to overflow on a narrow screen. */
.adjust-inventory-modal .adjust-inv-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section headings ("Stock réservé", "Stock disponible"). A class of the modal's own:
   `.abena-v2-title-3` is shared with other screens and must not be restyled globally. */
.adjust-inventory-modal .adjust-inventory-modal__section-title {
    font-family: 'Rounded Mplus 1c Bold', var(--kendo-font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.33;
    color: var(--abena-color-page-title);
}

/* Footer actions right-aligned, sized to label — prefix needed to beat Abena-v3.css's load-order win. */
.adjust-inventory-drawer .abena-v3-modal__footer,
.adjust-inventory-drawer .abena-v3-modal__footer:has(> .abena-v3-modal__action:only-child) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.adjust-inventory-drawer .abena-v3-modal__footer > .abena-v3-modal__action,
.adjust-inventory-drawer .abena-v3-modal__footer > .abena-v3-modal__action:only-child {
    flex: 0 0 auto;
    max-width: none;
}

.adjust-inventory-modal__grid .k-grid-header-table,
.adjust-inventory-modal__grid .k-grid-table {
    min-width: 70.25rem;
}

.adjust-inventory-modal .abena-v3-grid,
.adjust-inventory-modal .abena-v3-grid .k-grid,
.adjust-inventory-modal .abena-v3-modal__footer {
    --abena-v3-font: 'Gilroy-Regular', 'Gilroy', sans-serif;
    font-family: var(--abena-v3-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Page shell ──────────────────────────────────────────────────────────────
   Drop .abs-page's padding so the header band can span edge to edge with its own
   surface + bottom rule, and paint the subtle page background underneath.
   `.inventory-main-page` is carried by InventoryMainPage.razor only (verified), so this
   :has() cannot reach another screen. */
.abs-page:has(.inventory-main-page) {
    padding: 0 !important;
    margin: 0;
    background-color: var(--sn-surface-subtle);
}

.abs-left-bar .k-drawer-content .k-drawer-content:has(.inventory-main-page) {
    overflow: hidden;
}

.inventory-main-page {
    display: flex;
    flex-direction: column;
    gap: 0;                                     /* was 1.25rem in Abena-samples.css */
    height: calc(100vh - var(--top-bar-height));
    min-height: 0;
    width: 100%;
}

/* Grid area */
.inventory-main-page__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 2rem 1rem 2rem;
    box-sizing: border-box;
}

/* ── Filter toolbar ──────────────────────────────────────────────────────────
   Same shape as .ppm-toolbar (progression-plan/management): right-aligned row of
   filter → search → reset. Horizontal padding matches __content so it lines up
   with the grid below. */
.inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem 2rem 1rem 2rem;
}

.inventory-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Search wrapper: icon overlaid on the left of the field. */
.inventory-toolbar__search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.inventory-toolbar__search-icon {
    position: absolute;
    left: 0.75rem;
    z-index: 2;
    pointer-events: none;
    color: var(--sn-text-muted);
}

.inventory-toolbar__search .k-input-inner {
    padding-left: 2.4rem;
    color: #0d1740;
}

.inventory-toolbar__search .k-input-inner::placeholder {
    color: #565d79;
    opacity: 1;
}

/* Reset — plain text button, mirrors .ppm-toolbar__reset. */
.inventory-toolbar__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-family: var(--kendo-font-family);
    font-size: 0.875rem;
    color: var(--abena-color-action-blue);
    cursor: pointer;
}

.inventory-toolbar__reset:hover {
    text-decoration: underline;
}

/* ── Toolbar controls ── */
.inventory-toolbar__filters .k-picker,
.inventory-toolbar__filters .k-input,
.inventory-toolbar__filters .k-input-inner,
.inventory-toolbar__filters .k-input-value-text {
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 500;
}

.inventory-toolbar__filters .k-picker,
.inventory-toolbar__filters .k-input {
    background: #fff;
    border: 1px solid #c9d2dc;
    border-radius: 0.5rem;
    height: 2.3125rem;
}

.inventory-toolbar__filters .k-input-value-text {
    color: #565d79;
    font-size: 0.8125rem;
}

/* Undo the V2 navy fill / white text / uppercase / shadow on the status dropdown. */
.inventory-toolbar__filters .abena-v2-combo-box .k-dropdownlist,
.inventory-toolbar__filters .abena-v2-combo-box .k-dropdownlist .k-input-inner,
.inventory-toolbar__filters .abena-v2-combo-box .k-button,
.inventory-toolbar__filters .abena-v2-combo-box .k-button:hover {
    background-color: #fff !important;
    color: #565d79;
    border-inline-start-width: 0;
}

.inventory-toolbar__filters .abena-v2-combo-box .k-dropdownlist {
    border: 1px solid #c9d2dc;
    height: 2.3125rem !important;
    box-shadow: none;
    border-radius: 0.5rem !important;
}

.inventory-toolbar__filters .abena-v2-combo-box .k-dropdownlist .k-input-inner {
    justify-content: flex-start;
    text-align: left;
    text-transform: none;
    font-size: 0.875rem;
    letter-spacing: normal;
    font-family: var(--primary-font) !important;
    padding-left: 0.5rem;
    padding-right: 0;
}

.inventory-toolbar__filters .abena-v2-combo-box .k-picker {
    padding-left: 0;
}

/* The status filter is sized to its content once the V2 padding is gone, which leaves it
   noticeably narrower than the search beside it — give it a floor. */
.inventory-toolbar__filters .abena-v2-combo-box {
    min-width: 11rem;
}

/* Replace V2's "⌃" glyph with the same unicons chevron the reference toolbar uses. */
.inventory-toolbar__filters .abena-v2-combo-box .k-dropdownlist .k-button-icon::before {
    content: none !important;
}

.inventory-toolbar__filters .k-input-button .k-svg-icon,
.inventory-toolbar__filters .k-input-button .k-icon {
    display: none;
}

.inventory-toolbar__filters .k-input-button {
    width: 1.5rem;
    min-width: 1.5rem;
    justify-content: flex-end;
    padding-right: 0.5rem;
    padding-left: 0;
}

.inventory-toolbar__filters .k-input-button::after {
    content: "\eb3a" !important;
    font-family: "unicons-line" !important;
    font-size: 0.95rem;
    line-height: 1;
    color: #565d79;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ── Grid: one card per location ─────────────────────────────────────────────
   Ported from the redesigned order lines grid (.ord-* on feature/NEW_ORDER), renamed
   and trimmed. Plain markup rather than a Telerik grid because the design repeats the
   column header inside every card. No accent colour: the neutral grey rail is the
   design's own default for a block it has no colour for. */
.inv-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.5rem;
    font-family: var(--abena-v3-font);
    font-size: 0.875rem;
}

.inv-groups *,
.inv-groups *::before,
.inv-groups *::after {
    box-sizing: border-box;
}

.inv-groups__empty,
.inv-rows__empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--sn-text-muted);
}

.inv-group {
    background: #FFFFFF;
    border: 1px solid rgba(0, 61, 125, 0.173);
    border-left: 3px solid var(--sn-rail);
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px 0 #EDF1FB;
    overflow: hidden;
    flex-shrink: 0;
}

.inv-group__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

/* line-height:normal is required — the app's global `i { line-height: 1.5rem }` would
   otherwise inflate the caret's line box and push the header taller. */
.inv-group__caret {
    font-size: 1rem;
    line-height: normal;
    color: var(--sn-text-muted);
    transition: transform 120ms ease;
}

.inv-group.is-collapsed .inv-group__caret {
    transform: rotate(-90deg);
}

.inv-group.is-collapsed .inv-group__scroll {
    display: none;
}

.inv-group__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sn-rail);
}

.inv-group__title {
    font-family: 'Gilroy-Bold', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--abena-color-page-title);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-group__count {
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
    flex-shrink: 0;
}

/* Narrow viewports scroll the row grid rather than crushing the columns. */
.inv-group__scroll {
    overflow-x: auto;
}

/* Shared by the header row and the data rows so the two cannot drift apart. */
.inv-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(14rem, 1fr) 8rem 9rem 8rem 8rem;
    align-items: center;
    column-gap: 1rem;
    padding: 0.6875rem 0.875rem;
    min-width: 54rem;
}

/* The separator sits on the first row's top edge, not under the header, so a collapsed
   card shows no dangling rule. */
.inv-row--head {
    padding: 0 0.875rem;
    min-height: 2.625rem;
    border-top: 1px solid var(--sn-rail);
    color: #4F4F4F;
    font-size: 0.875rem;
}

.inv-rows .inv-row {
    border-top: 1px solid var(--sn-rail);
    min-height: 4rem;
    transition: background 0.15s;
    cursor: pointer;
}

.inv-rows .inv-row:hover {
    background: #F8F9FB;
}

.inv-cell--ref {
    color: var(--sn-text-muted);
}

.inv-cell--desig {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.inv-desig {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
    min-width: 0;
    overflow-wrap: anywhere;
}

.inv-desig-sub {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
    overflow-wrap: anywhere;
}

.inv-desig-sub i {
    font-size: 0.8125rem;
    line-height: normal;
}

.inv-cell--qty {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.inv-qty {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
}

.inv-qty-unit {
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
}

.inv-cell--alloc,
.inv-cell--allocated {
    color: var(--sn-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inv-cell--value {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
    white-space: nowrap;
}

/* ── Pager ───────────────────────────────────────────────────────────────────
   Hand-written (the cards replaced the Telerik grid that supplied one), styled to
   match the v3 grid pager: a detached grey bar below the scrolling card list. */
.inv-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    margin-top: 0.75rem;
    padding: 0 1.25rem;
    min-height: 2.875rem;
    background: #F2F4F6;
    border: 0.0625rem solid var(--sn-border);
    border-radius: 0.75rem;
    color: var(--sn-text);
    font-family: var(--abena-v3-font);
    font-size: 0.875rem;
}

.inv-pager__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inv-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    max-height: none;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #3D3D3D;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: normal;
    cursor: pointer;
}

.inv-pager__btn i {
    font-size: 0.75rem;
    line-height: normal;
}

.inv-pager__btn:hover:not(:disabled):not(.is-current) {
    background: #E4E8EC;
}

.inv-pager__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.inv-pager__btn--page.is-current {
    background: #CCDEFA;
    color: var(--abena-color-action-blue);
    font-family: var(--primary-bold);
    font-weight: normal;
}

.inv-pager__size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inv-pager__size .k-picker {
    background: #fff;
    border: 1px solid #c9d2dc;
    border-radius: 0.5rem;
    height: 2rem;
}

/* Pushed to the right edge, as the grid pager's info text is. */
.inv-pager__info {
    margin-left: auto;
    color: #3D3D3D;
    white-space: nowrap;
}

/* ── Icon-only collapse at the smallest breakpoint ───────────────────────────
   Only the two outline/secondary buttons drop their label — the solid
   "Réapprovisionner" CTA keeps its text. Literal px, not rem: a rem inside a media
   query resolves against the un-scaled 16px root regardless of .no-breakpoints. */
@media (max-width: 1150px) {
    .inventory-logs-cta > span,
    .inventory-export-cta > span,
    .inventory-movement-export-cta > span {
        display: none;
    }

    .inventory-logs-cta,
    .inventory-export-cta,
    .inventory-movement-export-cta {
        padding: 0 0.75rem;
    }
}

/* ══ Restock drawer (SlidePanel) ═════════════════════════════════════════════
   Scoping goes through the .restock-drawer child, not an ancestor :has(): SlidePanel
   exposes no Class parameter here, and a child scope cannot reach another screen.
   No .abena-v3-slide-panel__body override is needed — its standard padding/gap is
   what EditRoom uses too. */
.restock-drawer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.restock-drawer *,
.restock-drawer *::before,
.restock-drawer *::after {
    box-sizing: border-box;
}

.restock-drawer__section {
    margin: 0;
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--abena-color-title-deep);
}

/* ── Product search ────────────────────────────────────────────────────────── */
.restock-drawer__search {
    position: relative;
    display: block;
    width: 100%;
}

.restock-drawer__search .k-input,
.restock-drawer__search .k-picker {
    width: 100%;
}

.restock-drawer__search .k-input-inner {
    padding-left: 2.25rem;
}

/* line-height:normal defeats the global `i { line-height: 1.5rem }`, which otherwise
   offsets the glyph inside its own line box and breaks the vertical centring. */
.restock-drawer__search-icon,
.restock-drawer__search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    line-height: normal;
    color: var(--sn-text-muted);
    pointer-events: none;
    z-index: 1;
}

.restock-drawer__search-icon {
    left: 0.75rem;
}

.restock-drawer__search-clear {
    right: 2.75rem;
    cursor: pointer;
    pointer-events: auto;
}

.restock-drawer__search-clear:hover {
    color: var(--abena-color-page-title);
}

/* ComboBox item template */
.restock-drawer__option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.restock-drawer__option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.restock-drawer__option-hierarchy,
.restock-drawer__option-ref {
    font-size: 0.75rem;
    color: var(--sn-text-muted);
}

.restock-drawer__option-label {
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 0.8125rem;
    color: var(--sn-text);
}

/* ── Selected-article block ────────────────────────────────────────────────── */
.restock-drawer__article {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.restock-drawer__article-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.restock-drawer__ref {
    font-family: var(--abena-v3-font);
    font-size: 0.8125rem;
    color: var(--sn-text);
}

/* The app's unit names ("Carton(s) de 2160 Pièce(s) · 90 Sachet(s) × 24 Pièce(s)") are
   longer than the design's, and the quantities are the part that matters — wrap to two
   lines rather than clipping them. Same treatment as the orders grid. */
.restock-drawer__cond {
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.restock-drawer__hierarchy {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--sn-text-muted);
}

.restock-drawer__warning {
    font-size: 0.8125rem;
    color: var(--abena-color-error);
}

/* ── Existing stock, as stacked cards (was a 5-column Telerik grid) ────────── */
.restock-drawer__stock {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.restock-drawer__stock-title {
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 0.8125rem;
    color: var(--sn-text);
}

.restock-drawer__stock-row {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.625rem 0.875rem;
    border: 0.0625rem solid var(--sn-rail);
    border-left: 0.1875rem solid var(--sn-rail);
    border-radius: 0.5rem;
    background: var(--sn-bg);
}

.restock-drawer__stock-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.restock-drawer__stock-location {
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 0.8125rem;
    color: var(--sn-text);
}

.restock-drawer__stock-qty {
    font-size: 0.8125rem;
    color: var(--sn-text);
    white-space: nowrap;
}

.restock-drawer__stock-sub {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--sn-text-muted);
}

.restock-drawer__stock-dot {
    color: var(--sn-rail);
}

/* ── Stock entry ───────────────────────────────────────────────────────────── */
.restock-drawer__base-qty {
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 0.8125rem;
    color: var(--sn-text);
}

.restock-drawer__hint--error {
    color: var(--abena-color-error);
}

/* ── v3 field contract for the components Abena-v3.css doesn't cover ─────────
   `.abena-v3-form .k-dropdownlist` gets the 38px / --sn-rail / transparent-button
   treatment, but EditRoom (the reference form) uses no NumericTextBox, DatePicker or
   ComboBox, so those never got it. Mirrored here, verbatim, scoped to this drawer.
   Selectors are (0,3,0) — Abena-inventory.css loads BEFORE Abena-v3.css, so an equal
   specificity would lose; the extra class buys the win. !important where Telerik ships
   its own !important on `.k-input-outline` / `.k-picker-outline`. */
.restock-drawer.abena-v3-form .k-textbox,
.restock-drawer.abena-v3-form .k-numerictextbox,
.restock-drawer.abena-v3-form .k-datepicker,
.restock-drawer.abena-v3-form .k-combobox {
    height: 2.375rem;                            /* 38px — same as .ep-select */
    background: #FFFFFF;
    border: 0.0625rem solid var(--sn-rail) !important;
    border-radius: 0.5rem;
    box-shadow: none;
}

.restock-drawer.abena-v3-form .k-textbox:hover,
.restock-drawer.abena-v3-form .k-numerictextbox:hover,
.restock-drawer.abena-v3-form .k-datepicker:hover,
.restock-drawer.abena-v3-form .k-combobox:hover {
    border-color: var(--sn-rail) !important;
}

.restock-drawer.abena-v3-form .k-textbox.k-focus,
.restock-drawer.abena-v3-form .k-numerictextbox.k-focus,
.restock-drawer.abena-v3-form .k-datepicker.k-focus,
.restock-drawer.abena-v3-form .k-combobox.k-focus,
.restock-drawer.abena-v3-form .k-textbox:focus-within,
.restock-drawer.abena-v3-form .k-numerictextbox:focus-within,
.restock-drawer.abena-v3-form .k-datepicker:focus-within,
.restock-drawer.abena-v3-form .k-combobox:focus-within {
    border-color: var(--abena-color-action-blue) !important;
    box-shadow: none;
}

/* Trailing buttons (calendar, chevron, spinners): no fill, no border, muted glyph —
   the field must read as one clean white pill, per the dropdown contract. */
.restock-drawer.abena-v3-form .k-input-button,
.restock-drawer.abena-v3-form .k-input-spinner,
.restock-drawer.abena-v3-form .k-spinner-increase,
.restock-drawer.abena-v3-form .k-spinner-decrease {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--sn-text-muted);
}

.restock-drawer.abena-v3-form .k-input-button:hover,
.restock-drawer.abena-v3-form .k-spinner-increase:hover,
.restock-drawer.abena-v3-form .k-spinner-decrease:hover {
    background: var(--sn-row-hover);
    color: var(--abena-color-page-title);
}

.restock-drawer.abena-v3-form .k-input-inner {
    background: transparent;
    color: var(--abena-color-page-title);
}

/* ── Labels and inputs: beating the Roboto hardcoded in Abena-v3.css ─────────
   Re-pointing the token is not enough here: `.abena-v3-form__label` reads
   `var(--kendo-font-family)` (Roboto) rather than the token, and `.abena-v3-form input, select`
   plus `.k-input-inner` HARDCODE 'Roboto', the first one with !important. Those rules are shared
   (EditRoom, AddChambre…) and must not be touched globally, so they are overridden inside the
   drawer's scope. Selectors at (0,3,0) against (0,1,1)/(0,2,0): specificity is what settles it,
   and it has to, because Abena-inventory.css loads BEFORE Abena-v3.css. Same remedy as
   NEW_ORDER. */
.restock-drawer.abena-v3-form .abena-v3-form__label,
.restock-drawer.abena-v3-form .abena-v3-form__label--sub,
.restock-drawer.abena-v3-form .abena-v3-form__label-optional,
.restock-drawer.abena-v3-form .abena-v3-form__hint,
.restock-drawer.abena-v3-form input,
.restock-drawer.abena-v3-form select,
.restock-drawer.abena-v3-form .k-input .k-input-inner,
.restock-drawer.abena-v3-form .k-picker .k-input-inner,
.restock-drawer.abena-v3-form .k-picker .k-input-value-text,
.restock-drawer.abena-v3-form .k-dropdownlist .k-input-inner {
    font-family: var(--abena-v3-font) !important;
}

.restock-drawer.abena-v3-form .k-input-inner::placeholder,
.restock-drawer.abena-v3-form input::placeholder {
    font-family: var(--abena-v3-font) !important;
}

/* The ComboBox dropdown renders in a popup ANCHORED TO THE BODY, outside the drawer, so it
   cannot inherit the token. It carries a class of its own. */
.restock-drawer-popup,
.restock-drawer-popup .k-list-item {
    font-family: 'Gilroy-Regular', 'Gilroy', sans-serif;
}

/* ══ Movement log ════════════════════════════════════════════════════════════
   Grid on the left, summary on the right — the summary used to live in the grid footer, spread
   across two locked columns.

   The page is rendered by InventoryMainPage on the "movement" route, IN PLACE OF the stock
   content (it used to be an absolute overlay on top of it, which is where the two stacked headers
   came from). Hence the shell below, which neutralises the `height: calc(100vh - … - 3.125rem)`
   from Abena-samples.css — a shared file, left untouched: this one loads after it and wins at
   equal specificity. */
.inventory-movement-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* The page ground, so the header's white band stands out — the way `.abs-page` does it
       for /inventory. Inherited from the `k-bg-white` overlay days; kept because the rule
       stands on its own. */
    background: var(--sn-surface-subtle);
}

/* This container carries the scrolling: the aside's sticky resolves against IT, not against the
   body. `align-items: flex-start` is load-bearing — with the default `stretch` the aside would
   take the height of the left-hand column and have no room left to stick in. */
.inv-mvt-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 2rem 1.5rem;
}

/* min-width: 0 — without it the grid refuses to shrink below its intrinsic width and pushes the
   panel off the screen. */
.inv-mvt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* align-self overrides the parent's `align-items: flex-start` for THIS column only:
       with no explicit height here, the TelerikGrid's `Height="100%"` resolves against 0 and the
       grid renders empty. The aside keeps flex-start, which its sticky needs. */
    align-self: stretch;
}

.inv-mvt-side {
    width: 20rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

/* The TelerikGrid's `Height="100%"` resolves against this element. */
.inv-mvt-grid {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Carte du récapitulatif ─────────────────────────────────────────────────── */
.inv-mvt-recap {
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.25rem;
    background: #FFFFFF;
    border: 0.0625rem solid rgba(0, 61, 125, 0.173);
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.625rem 0 var(--abena-shadow-card-glow);
    box-sizing: border-box;
}

/* Named faces WITHOUT font-weight: Gilroy-Semibold is registered at weight=normal, so asking for
   600 on top of it would have the browser synthesise a fake bold. */
.inv-mvt-recap__title {
    padding: 0.125rem 0 0.25rem;
    font-family: var(--primary-bold);
    font-weight: normal;
    font-size: 1rem;
    color: var(--abena-color-page-title);
}

.inv-mvt-recap__caption {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
}

.inv-mvt-recap__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
    color: var(--sn-text-muted);
}

.inv-mvt-recap__line b {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
    white-space: nowrap;
}

.inv-mvt-recap__sep {
    height: 0.0625rem;
    background: var(--sn-rail);
    margin: 0.25rem 0;
}

.inv-mvt-recap__line--total {
    padding-top: 0.625rem;
}

.inv-mvt-recap__line--total span {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
}

.inv-mvt-recap__line--total b {
    font-size: 1rem;
    color: var(--abena-color-action-blue);
}

/* ── Narrow screen: the summary drops below the grid ─────────────────────────
   A low threshold (1024): the grid has 13 columns and scrolls horizontally anyway, so the two
   columns stay readable well below 1280 — a higher threshold stacked them on screens that did not
   need it. Literal px, not rem: inside a media query a rem resolves against the unscaled root, not
   against the app's responsive font-size. */
@media (max-width: 1024px) {
    .inv-mvt-layout {
        flex-direction: column;
    }

    /* Stacked, `align-self: stretch` only settles the width any more: the grid would lose
       its height again and render empty. It needs an explicit one. */
    .inv-mvt-main {
        height: 60vh;
        min-height: 22rem;
    }

    .inv-mvt-side {
        width: 100%;
        position: static;
    }
}

/* ── Log filters: every field carries its label, so they all line up ─────────── */
.inv-mvt-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inv-mvt-filter__label {
    font-family: var(--abena-v3-font);
    font-size: 0.8125rem;
    color: var(--sn-text-muted);
}

/* The v3 field contract (38px, --sn-rail border, white ground) for this bar's ComboBoxes and
   DatePickers — Abena-v3.css writes it for `k-dropdownlist` only. */
.inventory-toolbar__filters .inv-mvt-filter .k-picker,
.inventory-toolbar__filters .inv-mvt-filter .k-input {
    height: 2.375rem;
    background: #FFFFFF;
    border: 0.0625rem solid var(--sn-rail) !important;
    border-radius: 0.5rem;
    box-shadow: none;
}

.inventory-toolbar__filters .inv-mvt-filter .k-picker.k-focus,
.inventory-toolbar__filters .inv-mvt-filter .k-input.k-focus,
.inventory-toolbar__filters .inv-mvt-filter .k-picker:focus-within,
.inventory-toolbar__filters .inv-mvt-filter .k-input:focus-within {
    border-color: var(--abena-color-action-blue) !important;
    box-shadow: none;
}

/* Trailing button (chevron, calendar): no ground, no border, and above all CENTRED — Telerik
   left it as an off-centre square. */
.inventory-toolbar__filters .inv-mvt-filter .k-input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--sn-text-muted);
}

.inventory-toolbar__filters .inv-mvt-filter .k-input-button .k-icon,
.inventory-toolbar__filters .inv-mvt-filter .k-input-button .k-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.inventory-toolbar__filters .inv-mvt-filter .k-input-inner {
    background: transparent;
    color: var(--abena-color-page-title);
}

/* ── Cellules tronquées + tooltip ───────────────────────────────────────────── */
.inv-mvt-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The product name is what one comes to the log for. Named face with no font-weight:
   Gilroy-Semibold is registered at weight=normal. */
.inv-mvt-desig {
    font-family: var(--primary-bold);
    font-weight: normal;
    color: var(--abena-color-page-title);
}

/* ── Deltas signés ──────────────────────────────────────────────────────────── */
.inv-mvt-delta {
    font-family: var(--primary-bold);
    font-weight: normal;
    white-space: nowrap;
}

.inv-mvt-delta--up {
    color: var(--abena-color-badge-green-fg);
}

.inv-mvt-delta--down {
    color: var(--abena-color-badge-red-fg);
}

/* ── Filters: a chevron on the dropdowns, the calendar alone on the dates ─────
   `.inventory-toolbar__filters .k-input-button::after` draws a unicons chevron for /inventory's
   AbenaV2Multiselect, whose native caret is hidden. These filters have their own Telerik SVG, so
   the pseudo-element piled on top of it — two chevrons on the dropdowns, a stray chevron beside
   the date calendars. It is neutralised here (0,3,1 against 0,2,1) without touching /inventory's
   rule. The result matches the restock drawer's fields, where "Unité" carries a chevron and
   "DLUO" has nothing but its calendar. */
.inventory-toolbar__filters .inv-mvt-filter .k-input-button::after {
    content: none !important;
    display: none !important;
}