/**
 * Phase 5 — list-page anatomy (`/sells`, `/purchases`, `/products`,
 * `/contacts`).
 *
 * The owner complaint: internal pages don't share one visual language.
 * This slice makes the highest-traffic LIST pages share one anatomy —
 * page header (title + primary action) -> filter bar -> list card
 * (toolbar + table) -> pagination — as the reference pattern the next
 * list-page slice copies.
 *
 * Every rule here is scoped under `.ds-internal .ds-list-page`
 * (`.ds-internal` is already on <body> for every non-POS internal
 * screen; `.ds-list-page` is added to a list screen's own
 * `<section class="content">` root) so nothing here can leak onto a
 * page that has not opted into this anatomy yet.
 *
 * `.ds-list-filters` (a wrapper <div>, since the shared
 * `components/filters.blade.php` partial does not expose a `$class`
 * slot to inject a marker into its own root) and `.ds-list-card`
 * (passed straight into `components/widget.blade.php`'s existing
 * `$class` slot alongside `modern-dt-card`, or added directly to a
 * bare table wrapper like `/products`' `#product_table_container`)
 * are the two static markers a future list page adds to reach this
 * anatomy.
 *
 * Round 2 (owner review of sells_ar_light_viewport_after.png) moved
 * every fix that was a SHARED COMPONENT defect — payment-status pills,
 * the row-actions ghost button, the export-button border, the bidi
 * phone-cell utility, table-header density, the filters-card slim-bar
 * treatment — out of this file and into ui-unified.css's delimited
 * "list-anatomy" block (search that file for the literal marker),
 * scoped `.ds-internal` (not `.ds-list-page`), because each root cause
 * lives in markup EVERY list screen shares (SellService/
 * PurchaseService/ContactManagementService/
 * ProductStockService's DataTables columns, `public/js/common.js`'s
 * shared button config), not just the pages that happen to carry the
 * `.ds-list-page` marker. This file now holds only true PAGE-anatomy
 * layout: the toolbar row's own flex proportions (so the three regions
 * sit as one tight row instead of leaving a dead gap) and the filter
 * card wrapper's local spacing.
 *
 * Not (yet) in this anatomy, and why:
 *   - No KPI row on `/sells`/`/purchases`: neither computes one today,
 *     and this slice does not touch controllers. `/products` already
 *     HAS a KPI row (`.ds-grid-stats`, pre-existing, untouched) —
 *     confirming the anatomy leaves room for one without inventing a
 *     second convention.
 *   - The "+ Add" primary action stays inside the list card's own
 *     header (top-right), not the context bar's `@yield('page-actions')`
 *     slot. Zero existing page uses that slot yet.
 *
 * Every colour literal below is the fallback argument of a `var()` call
 * that already exists, with this exact value, elsewhere in
 * ui-unified.css — no new colour was invented for this file.
 * DESIGN_SYSTEM.md §6 rules 1-10 apply throughout.
 */

/* -- Filter bar: local spacing only ------------------------------------
   `components/filters.blade.php` already renders a `.ui-shell-card
   .ui-filter-card`; its slim-bar/contrast treatment now lives in
   ui-unified.css (shared, benefits every page using that component,
   not just these four). This only tightens the collapsed header's own
   vertical rhythm to match the list card's header one row below it, so
   the two read as one connected flow. */
.ds-internal .ds-list-page .ds-list-filters .ui-filter-card > .ui-shell-card-header {
  padding-block: 10px;
}

/* -- List card toolbar: one tight row, not three loosely-spread regions --
   The three-column row/flex layout itself (length control / button
   cluster / search box) is fixed app-wide in ui-unified.css (Phase 2 /
   S3). What was still wrong: the middle "button cluster" column is
   `flex: 1 1 0%` (grows to fill ALL remaining space between the length
   control and the search box), but its buttons hug that column's own
   START edge (default block flow) — so on a typical row the buttons
   occupy maybe half the column's width and the OTHER half sits empty
   BEFORE the search column even begins. Measured live at 1366px:
   button-cluster column 533.7px wide, buttons themselves only ~504px —
   a ~230px dead gap was landing between the visible button group and
   the search box's own column, exactly the "search box floats far from
   the length/export controls" the owner flagged.
   Fix: let the button-cluster column size to its OWN content
   (`flex: 0 1 auto`, shrinks under pressure, never grows past what its
   buttons need) and push the search column to the true inline-end with
   `margin-inline-start: auto` (a flex auto-margin consumes ALL
   remaining space on one side) instead of relying on flex-grow to
   simulate a gap. Net effect: length control + button group sit
   shoulder-to-shoulder as one tight cluster, search sits flush at the
   far end, with nothing but the row's own `gap` token in between —
   "one row" per the anatomy, in both `dir` values (a logical margin,
   not a hardcoded side). */
.ds-internal .ds-list-page .ds-list-card .dataTables_wrapper > div.row:first-child > .col-sm-8 {
  flex: 0 1 auto;
}

.ds-internal .ds-list-page .ds-list-card .dataTables_wrapper > div.row:first-child > .col-sm-3 {
  margin-inline-start: auto;
}

/* Below 992px the row already stacks to a column (ui-unified.css); the
   auto-margin/shrink rules above are harmless there (each region is
   `flex: 1 1 auto` at full width, an inline-start auto-margin on a
   100%-wide flex item in a column direction is a no-op). */