/* ============================================================
   Mobile control bar — DIPS
   Collapses a desktop filter bar + action buttons into a
   persistent filter field + a category dropdown + an Actions
   dropdown so nothing overflows on a phone. Reusable across the
   dense pages (Part Manager, Inventory, POs, RMAs, Projections).

   The bar markup carries Bootstrap's `d-md-none`, so these rules
   only ever take effect below the md breakpoint; the desktop bar
   (`d-none d-md-flex`) is untouched. Depends on dips-theme tokens
   (with light-mode hex fallbacks so it degrades gracefully).
   ============================================================ */

.m-controls { display: flex; gap: 8px; position: relative; z-index: 1031; }
.m-filterwrap { flex: 1 1 auto; min-width: 0; position: relative; }
.m-actionswrap { position: relative; flex: 0 0 auto; }

/* Filter field with the category dropdown docked at its end */
.m-filterbox {
  display: flex; align-items: center; height: 42px; overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #c6c7c8);
  border-radius: var(--radius-md, 8px);
}
.m-filterbox:focus-within { border-color: var(--ink, #1b1e23); }
.m-filter-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent;
  padding: 0 12px; font: inherit; font-size: 14px; color: var(--fg, #1b1e23);
}
.m-filter-input:focus { outline: none; }
.m-filter-input::placeholder { color: var(--fg-subtle, #8a8f99); }
/* Optional leading search icon inside the filter box. */
.m-filter-icon { display: inline-flex; align-items: center; flex: 0 0 auto;
  padding-left: 12px; color: var(--fg-subtle, #8a8f99); font-size: 13px; }
.m-filter-icon + .m-filter-input { padding-left: 8px; }

.m-cat-trigger {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 46%;
  height: 100%; padding: 0 10px; border: 0; border-left: 1px solid var(--border, #e3e4e6);
  background: transparent; color: var(--fg-muted, #5b6068);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.m-cat-trigger .m-cat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cat-trigger[aria-expanded="true"] { background: var(--surface-hover, #eef0f2); color: var(--fg, #1b1e23); }

/* Actions trigger (ellipsis) */
.m-actions-trigger {
  height: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, #c6c7c8);
  border-radius: var(--radius-md, 8px); font: inherit; font-size: 14px; font-weight: 500;
  color: var(--fg, #1b1e23); cursor: pointer;
}
.m-actions-trigger[aria-expanded="true"] { background: var(--surface-hover, #eef0f2); }

/* Dropdown menu — shared by filter, actions and export submenu */
.mpm-menu {
  position: absolute; top: calc(100% + 6px);
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e4e6);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-pop, 0 12px 28px rgba(20,23,28,.18));
  z-index: 1032; overflow: hidden; padding: 4px 0;
}
.mpm-menu[hidden] { display: none; }
.mpm-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--fg, #1b1e23);
  cursor: pointer; text-align: left;
}
.mpm-row:hover, .mpm-row:active { background: var(--surface-hover, #eef0f2); }
.mpm-row > .fa-check { color: var(--moss, #5a7d2a); }
.mpm-div { height: 1px; background: var(--hairline-soft, #ededed); }
.mpm-check {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 12px 14px; margin: 0; font: inherit; font-size: 14px;
  color: var(--fg, #1b1e23); cursor: pointer;
}
.mpm-check input { width: 17px; height: 17px; flex: 0 0 auto; }
.mpm-subhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.m-back { border: 0; background: transparent; cursor: pointer; color: var(--fg-subtle, #8a8f99); display: inline-flex; padding: 2px; }

/* Full-bleed scrim — a tap anywhere closes the open menu */
.mpm-scrim { position: fixed; inset: 0; z-index: 1030; background: transparent; }
.mpm-scrim[hidden] { display: none; }