@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  color-scheme: light;
  --background: #f1f1f4;
  --surface: #ffffff;
  --foreground: #1b1b2c;
  --primary: #30336b;
  --primary-hover: #23255a;
  --primary-foreground: #ffffff;
  --muted: #f7f7f9;
  --muted-foreground: #5e5e72;
  --accent: #ececf5;
  --accent-foreground: #30336b;
  --border: #dfdfe6;
  --border-soft: #ececf1;
  --input: #c8c8d4;
  --ring: #4a4d9b;
  --placeholder: #6c6c80;
  --in-stock: #1f7a5c;
  --unavailable: #a64b4b;
  --unavailable-soft: #fcf1ef;
  /* Company palette: brushed gray surfaces, indigo for action, metallic gold for brand accents and state. */
  --gold-100: #faf4d4;
  --gold-300: #f6e58d;
  --gold-500: #d4af37;
  --gold-700: #705708;
  --metal: linear-gradient(135deg, #f6e58d 0%, #d4af37 52%, #b08d2a 100%);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgb(27 27 44 / .05), 0 4px 14px rgb(27 27 44 / .04);
  --shadow-float: 0 10px 30px rgb(27 27 44 / .18);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --page-width: 1320px;
  --font-ui: "Vazirmatn", "IRANSansX", "IRANSans", Tahoma, "Noto Sans Arabic", sans-serif;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 24px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-ui); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; caret-color: var(--primary); }
button, input, select { font: inherit; color: inherit; letter-spacing: normal; outline: none; }
button, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--primary); text-underline-offset: .25em; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
::selection { background: #f6e58d; color: var(--foreground); }
[hidden] { display: none !important; }
svg { display: block; flex-shrink: 0; }
bdi { unicode-bidi: isolate; }
* { scrollbar-width: thin; scrollbar-color: #c4c4d4 transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 16px; z-index: 60; padding: 8px 16px; border: 1px solid var(--primary); background: var(--surface); border-radius: 6px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* Customer view hides internal detail; the staff toggle in the header reveals it. */
html[data-view="customer"] .staff-only { display: none !important; }
html[data-view="staff"] .customer-only { display: none !important; }

/* ===== Buttons and inputs ===== */
.ui-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background-color 140ms, border-color 140ms, color 140ms; }
.ui-button svg { width: 16px; height: 16px; }
.ui-button--default { min-block-size: 44px; padding: 8px 16px; }
.ui-button--sm { min-block-size: 36px; padding: 5px 12px; font-size: 13px; }
.ui-button--icon { inline-size: 40px; block-size: 40px; padding: 0; }
.ui-button--outline { border-color: var(--input); background: var(--surface); }
.ui-button--outline:hover, .ui-button--ghost:hover { background: var(--accent); }
.ui-button--primary { color: var(--primary-foreground); background: var(--primary); }
.ui-button--primary:hover { background: var(--primary-hover); }
.ui-button:disabled { opacity: .4; pointer-events: none; }

.native-select-wrap { display: inline-flex; align-items: center; position: relative; min-inline-size: 0; }
.ui-native-select { display: block; appearance: none; inline-size: 100%; min-inline-size: 0; min-block-size: 44px; padding-block: 7px; padding-inline: 12px 36px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; line-height: 1.65; cursor: pointer; transition: border-color 140ms; }
.ui-native-select:hover { border-color: #a9a9bd; }
.ui-native-select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.native-select-wrap > svg { position: absolute; inset-inline-end: 12px; width: 14px; height: 14px; pointer-events: none; color: var(--muted-foreground); }

/* ===== Shell ===== */
.app-frame { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header-inner, .inventory-tools, .inventory-page, .site-footer { inline-size: min(var(--page-width), calc(100% - 64px)); margin-inline: auto; }
.site-header-inner { min-block-size: var(--hdr-h); padding-block: var(--hdr-pad, 0px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; transition: min-block-size 320ms var(--ease-out), padding-block 320ms var(--ease-out), row-gap 320ms var(--ease-out); }
.site-header-inner > .brand-lockup { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header-inner > .header-tools { grid-column: 2; grid-row: 1; }
.site-header-inner > .staff-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
.brand-lockup { display: flex; align-items: center; min-inline-size: 0; gap: 10px; }
.brand-art { display: grid; gap: 2px; inline-size: clamp(140px, 15vw, 215px); max-inline-size: 100%; min-inline-size: 0; transition: inline-size 320ms var(--ease-out); }
.brand-logo, .brand-tagline { display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
.brand-caption { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; max-inline-size: 100px; overflow: hidden; transition: max-inline-size 320ms var(--ease-out), opacity 200ms; }
.staff-toggle { color: var(--muted-foreground); }
.staff-toggle[aria-pressed="true"] { color: var(--gold-700); background: var(--gold-100); border-color: var(--gold-300); }

.inventory-page { flex: 1; padding-block: 4px 56px; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.stock-summary { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-block-size: 36px; padding-inline: 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-foreground); font-size: 13px; }
.stock-summary-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--in-stock); }
.total-count { color: var(--foreground); font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== Sticky dock: header and search stay reachable while the list scrolls ===== */
:root { --hdr-h: 68px; }
html { scroll-padding-block-start: 124px; }
.scroll-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 36px; pointer-events: none; }
/* The holder keeps the dock's footprint (--holder-h, set by JS) while the dock itself is fixed. */
.dock-holder { position: relative; z-index: 40; min-block-size: var(--holder-h, 0px); }
.dock { background: var(--background); box-shadow: 0 0 0 0 rgb(27 27 44 / 0); transition: box-shadow 360ms var(--ease-out); }
.dock-holder[data-stuck="true"] { --hdr-h: 52px; }
.dock-holder[data-stuck="true"] .dock { position: fixed; inset-block-start: 0; inset-inline: 0; max-block-size: 100dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 28px -10px rgb(27 27 44 / .24), 0 1px 0 var(--border); }
/* A thin metallic gold edge marks the docked bar. */
.dock-holder[data-stuck="true"] .dock::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--metal); pointer-events: none; }
.dock-holder[data-stuck="true"] .brand-art { inline-size: clamp(120px, 12vw, 175px); }
.dock-holder[data-stuck="true"] .brand-caption { max-inline-size: 0; opacity: 0; }

/* ===== Search and filters ===== */
.inventory-tools { padding-block: 16px 12px; transition: padding-block 320ms var(--ease-out); }
.dock-holder[data-stuck="true"] .inventory-tools { padding-block: 8px; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); transition: padding 320ms var(--ease-out), background-color 260ms, border-color 260ms, box-shadow 260ms; }
.dock-holder[data-stuck="true"] .toolbar { padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.toolbar-more, .toolbar-more-inner { display: contents; }
.search-box { display: flex; align-items: center; position: relative; flex: 1 1 auto; max-inline-size: 560px; block-size: 48px; background: var(--surface); border: 1px solid var(--input); border-radius: 10px; transition: border-color 140ms, box-shadow 140ms, block-size 320ms var(--ease-out); }
.dock-holder[data-stuck="true"] .search-box { block-size: 42px; }
.search-box:hover { border-color: #a9a9bd; }
.search-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px rgb(74 77 155 / .2); }
.search-symbol { position: absolute; inset-inline-start: 14px; color: var(--muted-foreground); pointer-events: none; }
.ui-input.search-input { appearance: none; inline-size: 100%; block-size: 100%; border: 0; box-shadow: none; padding-block: 0; padding-inline: 46px 48px; background: transparent; font-size: 15px; border-radius: inherit; text-align: start; }
.search-input::placeholder { color: var(--placeholder); opacity: 1; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear, .search-shortcut { position: absolute; inset-inline-end: 6px; }
.search-shortcut { display: grid; place-items: center; inset-inline-end: 12px; inline-size: 24px; block-size: 26px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted-foreground); font-family: var(--font-ui); font-size: 12px; pointer-events: none; line-height: 1; }
.filter-toggle { position: relative; min-block-size: 48px; transition: background-color 140ms, border-color 140ms, color 140ms, min-block-size 320ms var(--ease-out), inline-size 320ms var(--ease-out); }
.dock-holder[data-stuck="true"] .filter-toggle { min-block-size: 42px; }
.filter-toggle[aria-expanded="true"] { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }
.filter-count { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 999px; background: var(--metal); color: var(--primary); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.result-count { margin-inline-start: auto; color: var(--muted-foreground); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-count[data-pending="true"] { color: var(--primary); }
.mobile-sort { display: none; }
/* Expand/collapse-all: one segmented control; the action that would change nothing is disabled. */
.tree-actions { display: inline-flex; align-items: stretch; flex-shrink: 0; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted); }
.tree-action { min-block-size: 38px; padding-inline: 12px; gap: 6px; border-radius: 7px; color: var(--muted-foreground); }
.tree-action:hover { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgb(27 27 44 / .08); }
.tree-action:active { transform: scale(.97); }
.tree-action:focus-visible { outline-offset: 1px; }
.tree-action:disabled { opacity: .45; }
.tree-action svg { inline-size: 16px; block-size: 16px; transition: transform 200ms var(--ease-out); }
.tree-action:not(:disabled):hover svg { transform: scaleY(1.15); }
.dock-holder[data-stuck="true"] .tree-action { min-block-size: 34px; }

.filter-panel { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; align-items: end; gap: 16px; margin-block-start: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); }
.field { display: grid; gap: 6px; min-inline-size: 0; }
.field label { color: var(--muted-foreground); font-size: 13px; }
.filter-reset { justify-self: start; }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 12px 0; }
.filter-chip { min-block-size: 36px; padding: 4px 10px 4px 12px; border-color: var(--gold-300); background: var(--gold-100); color: var(--primary); font-size: 13px; }
.filter-chip:hover { background: var(--gold-300); }
.filter-chip svg { inline-size: 13px; block-size: 13px; }

/* The column panel lives in the browser top layer, outside the scrolling dock. */
.column-picker { min-block-size: 48px; }
.column-picker[aria-expanded="true"] { background: var(--accent); border-color: var(--primary); color: var(--primary); }
.dock-holder[data-stuck="true"] .column-picker { min-block-size: 44px; }
.column-panel { position: fixed; inset: auto; z-index: 50; inline-size: min(330px, calc(100vw - 16px)); max-block-size: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--foreground); box-shadow: 0 12px 32px rgb(27 27 44 / .18); }
.column-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.column-panel-heading h2 { margin: 0; font-size: 15px; font-weight: 650; }
.column-panel-heading .ui-button { min-inline-size: 44px; min-block-size: 44px; }
.column-fixed-note { margin: 0 0 12px; padding-block-end: 12px; border-block-end: 1px solid var(--border-soft); color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.column-panel .permission-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.column-panel > .field-hint { margin: 12px 0 0; line-height: 1.8; }
.permission-options { display: grid; gap: 4px 12px; }
.permission-choice { display: flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--foreground); font-size: 13px; line-height: 1.7; cursor: pointer; }
.permission-choice input { inline-size: 18px; block-size: 18px; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.permission-choice input:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.permission-choice:has(input:disabled) { cursor: default; }
.permission-choice:has(input:disabled:not(:checked)) { color: var(--muted-foreground); }
@media screen and (max-width: 759px) {
  .column-picker { min-block-size: 50px; padding-inline: 10px; gap: 5px; font-size: 12px; }
  .cell-code, .cell-warehouse, .type-warehouse, .cell-meta[data-key="group"] { display: none !important; }
  .child-row .cell-inventory { grid-column: 1 / -1; }
  .group-head .cell-inventory { max-inline-size: none; }
}

/* ===== Results card ===== */
/* overflow: clip rounds the card without becoming a scroll container, so the column header can stick to the viewport. */
.results-region { position: relative; margin-block-start: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; overflow: clip; scroll-margin-block-start: 20px; }
.table-sentinel { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; pointer-events: none; }
.results-region:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.results-region[aria-busy="true"]::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: 3; background: linear-gradient(90deg, transparent, var(--gold-500), transparent) 0 0 / 40% 100% no-repeat; animation: busy-slide 1.1s linear infinite; }
@keyframes busy-slide { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.results-region[aria-busy="true"] { cursor: progress; }
.table-shell { transition: opacity 160ms; }
.table-shell[data-pending="true"] { opacity: .5; }
.ui-table-wrap { inline-size: 100%; overflow: clip; }

/* ===== Tree: parent code → child codes → spools / colors ===== */
/* Type scale for the list (one step apart, so each level reads at a glance):
   parent name 14.5/650 · child name 13.5/400 · meta 12.5 · captions 12; stock: parent 17/700, child 14.5/650. */
.tree-wrap {
  --sheath: #30336b; --band: #f0f0f6; --band-open: #f8f2d6; --branch: #c4c4d8; --track: #e0e0ec;
  /* Stepped widths: the child band is inset under the parent's toggle; the inset is taken from the gutter so
     the code, name and stock columns stay aligned on both levels. */
  --col-gutter: 64px; --row-end: 16px;
  --l2-start: 40px; --l2-end: 10px;
  --trunk-x: 31px;
  --line: 21px;
  --col-name: minmax(260px, 2.7fr); --col-stock: minmax(145px, 1.05fr); --col-warehouse: minmax(176px, 1fr);
  --cols: minmax(128px, .85fr) var(--col-name) var(--col-stock) var(--col-warehouse) repeat(3, minmax(72px, .65fr));
}
[data-core="0"] { --core: #8a5a3c; }
[data-core="1"] { --core: #2b2f36; }
[data-core="2"] { --core: #8d96a3; }
[data-core="3"] { --core: #3b73c4; }
[data-core="4"] { --core: #3f9a6a; }
[data-core="5"] { --core: #c4453f; }
[data-core="6"] { --core: #d98a2b; }
[data-core="7"] { --core: #f3f5f9; }

.tree-grid { min-inline-size: var(--grid-min, 990px); font-size: 13.5px; line-height: 1.6; }
@media (min-width: 1200px) {
  .tree-grid .types { grid-column: var(--types-start, 3) / var(--types-end, 6); }
}
.tree-grid .row { display: grid; grid-template-columns: var(--col-gutter) var(--cols); align-items: center; column-gap: 12px; padding-inline: 0 var(--row-end); }
.meta-cells { display: contents; }
.no-parent { color: var(--muted-foreground); font-weight: 600; letter-spacing: .1em; }
.tree-grid .cell { min-inline-size: 0; overflow-wrap: anywhere; }
/* Sticks under the compact top bar; --dock-stuck-h is measured by JS once the bar has settled. */
.tree-header { position: sticky; inset-block-start: var(--dock-stuck-h, 0px); z-index: 2; min-block-size: 40px; background: var(--primary); box-shadow: inset 0 -2px 0 var(--gold-500); transition: inset-block-start 360ms var(--ease-out), background-color 260ms, box-shadow 360ms var(--ease-out); }
.results-region[data-head-stuck="true"] .tree-header { background: var(--primary-hover); box-shadow: 0 12px 20px -12px rgb(27 27 44 / .55), inset 0 -2px 0 var(--gold-300); }
/* Header text is light on indigo; the sorted column and hover state turn gold. */
.tree-header .sort-button { min-block-size: 44px; color: #dcdcee; font-size: 12.5px; white-space: normal; line-height: 1.5; text-align: start; }
.tree-header .sort-button:hover, .tree-header [aria-sort] .sort-button { color: var(--gold-300); }
.tree-header .sort-button:focus-visible { outline-color: var(--gold-300); outline-offset: 2px; }
.tree-header .column-warehouse { color: #dcdcee; font-size: 12.5px; font-weight: 500; }

.sort-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; max-inline-size: 100%; min-block-size: 44px; padding: 0; background: none; border: 0; border-radius: 4px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 140ms; }
.sort-button:hover, th[aria-sort] .sort-button, [aria-sort] .sort-button { color: var(--primary); }
.sort-button svg { inline-size: 13px; block-size: 13px; }
.sort-inactive { opacity: 0; }
.sort-button:hover .sort-inactive, .sort-button:focus-visible .sort-inactive { opacity: .55; }

/* Level 1 — parent code: full width, tinted band, bold name. An open group turns its edge gold. */
.group { position: relative; border-block-end: 1px solid var(--border); }
.group:last-child { border-block-end: 0; }
.group::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1; inline-size: 3px; background: var(--sheath); opacity: .18; transition: opacity .2s ease, background-color .2s ease; pointer-events: none; }
.group:hover::before { opacity: .5; }
.group.is-open::before { background: var(--gold-500); opacity: 1; }
.group-head { min-block-size: 58px; padding-block: 9px; background: var(--band); cursor: pointer; transition: background-color .2s ease; }
.group-head:hover { background: #e9e9f2; }
.group.is-open .group-head { background: var(--band-open); box-shadow: inset 0 -1px 0 #eadb9c; }
.group-head .cell-gutter { display: flex; align-items: center; padding-inline-start: 9px; }
.parent-name { display: block; color: #15152b; font-size: 14.5px; font-weight: 650; line-height: 1.6; }
.group-head .product-code { color: var(--sheath); font-size: 12.5px; font-weight: 700; }
.partial-note { display: inline-block; margin-block-start: 3px; padding: 0 7px; border-radius: 4px; background: #fbf3cc; color: #5f470d; font-size: 12px; }
.group-head .cell-meta { color: #45455e; font-size: 12.5px; }
.mixed-chip { display: inline-block; padding: 0 8px; border-radius: 4px; background: #e4e4f1; color: #30336b; font-size: 12px; }

/* Number and unit share a baseline; the type rows below inherit this stock track. */
.cell-inventory { display: grid; gap: 4px; justify-items: start; align-content: start; }
.stock-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-block-size: var(--line); line-height: var(--line); }
.stock-unit { color: var(--muted-foreground); font-size: 12px; }
.total-tag { color: var(--muted-foreground); font-size: 12px; }
.parent-total .stock-value { color: var(--sheath); font-size: 17px; font-weight: 700; }
.group-head .cell-inventory { align-content: center; }
.group-head .split { justify-self: stretch; }

.cell-warehouse, .type-warehouse { min-inline-size: 0; color: var(--foreground); font-size: 12px; line-height: 1.7; }
.cell-warehouse { padding-block: 2px; }
.warehouse-name { min-inline-size: 0; overflow-wrap: anywhere; }
.warehouse-unknown { color: var(--muted-foreground); }
.warehouse-details { min-inline-size: 0; }
.warehouse-details > summary { display: flex; align-items: center; gap: 5px; min-block-size: 32px; color: var(--primary); cursor: pointer; list-style: none; font-weight: 500; }
.warehouse-details > summary::-webkit-details-marker { display: none; }
.warehouse-details > summary > span { min-inline-size: 0; }
.warehouse-chevron { inline-size: 12px; block-size: 12px; }
.warehouse-details[open] .warehouse-chevron { transform: rotate(180deg); }
/* Content-independent tracks keep the numeric scan line fixed across product breakdowns. */
.warehouse-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2px 12px; margin: 4px 0 0; padding: 7px 0 0; border-block-start: 1px solid var(--border); list-style: none; }
.warehouse-breakdown > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-block: 4px; }
.warehouse-quantity { display: flex; direction: rtl; flex-wrap: wrap; align-items: baseline; align-content: start; gap: 0 4px; min-inline-size: 0; font-variant-numeric: tabular-nums; }
.warehouse-number, .warehouse-unit { max-inline-size: 100%; overflow-wrap: anywhere; }
.warehouse-number { text-align: end; font-weight: 600; }
.warehouse-unit { font-size: .92em; }
.warehouse-breakdown > li > .warehouse-name { grid-column: 1; grid-row: 1; }
.warehouse-breakdown > li > .warehouse-quantity { grid-column: 2; grid-row: 1; }
.warehouse-breakdown > li > .warehouse-quantity.is-negative { color: var(--unavailable); }
.warehouse-print { display: none; }

/* Signature: each child is one core of the parent cable, drawn as a share of its total. */
.split { display: flex; gap: 2px; inline-size: 100%; max-inline-size: 168px; block-size: 6px; overflow: hidden; border-radius: 3px; background: var(--track); }
.seg { display: block; flex: 0 1 auto; min-inline-size: 3px; block-size: 100%; background: var(--core); border-radius: 1px; transform-origin: 100% 50%; transition: transform .2s ease, filter .15s ease; }
.seg[data-core="7"] { box-shadow: inset 0 0 0 1px #b4b4c6; }
.seg.is-hot { filter: saturate(1.4) brightness(.9); transform: scaleY(1.8); }
.group.is-open .seg { animation: core-draw .5s var(--ease-out) backwards; }
.group.is-open .seg:nth-child(2) { animation-delay: .04s; }
.group.is-open .seg:nth-child(3) { animation-delay: .08s; }
.group.is-open .seg:nth-child(4) { animation-delay: .12s; }
.group.is-open .seg:nth-child(n+5) { animation-delay: .16s; }
@keyframes core-draw { from { transform: scaleX(0); } }

.tree-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-block-size: 36px; min-inline-size: 46px; padding: 0 8px; border: 1.5px solid var(--sheath); border-radius: var(--radius-sm); background: var(--surface); color: var(--sheath); font-size: 13px; font-weight: 700; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.tree-toggle:hover, .group.is-open .tree-toggle { background: var(--sheath); color: #fff; }
.tree-toggle:active { transform: scale(.96); }
.tree-chevron { inline-size: 14px; block-size: 14px; transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.group.is-open .tree-chevron { transform: rotate(0deg); }
.tree-count { font-variant-numeric: tabular-nums; }

.group-body { display: grid; grid-template-rows: 0fr; background: #f9f9fb; transition: grid-template-rows .3s var(--ease-out); }
.group.is-open .group-body { grid-template-rows: 1fr; }
.group-children { position: relative; min-block-size: 0; overflow: hidden; padding-block: 0; transition: padding .3s var(--ease-out); }
.group.is-open .group-children { padding-block: 6px 10px; }

/* Level 2 — child codes: one narrower white band, inset under the parent's toggle. Rows align to their first
   line so a child whose spool list is open still reads code → name → stock on one line. */
.child-list { margin-inline: var(--l2-start) var(--l2-end); }
.tree-grid .child-row { grid-template-columns: calc(var(--col-gutter) - var(--l2-start)) var(--cols); padding-inline-end: calc(var(--row-end) - var(--l2-end)); align-items: start; padding-block: 7px; }
.child { position: relative; border-radius: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .3s var(--ease-out), background-color .15s ease; }
/* Hairlines start at the code column, so the branch lines stay unbroken down the gutter. */
.child:not(.is-last)::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: calc(var(--col-gutter) - var(--l2-start)) 0; block-size: 1px; background: var(--border-soft); }
.group.is-open .child { opacity: 1; transform: none; transition-delay: calc(min(var(--i, 0), 6) * 25ms); }
.child:hover, .child:focus-within { background: #f6f6fb; }
.child-row.has-types > .cell-gutter { grid-column: 1; grid-row: 1 / span 2; }
.child-row .cell-code, .child-row .cell-name, .child-row .cell-meta { min-block-size: var(--line); line-height: var(--line); }
.child-row .code-cell { block-size: var(--line); }
.child-row .copy-code { inline-size: 26px; block-size: 26px; margin-block: -2.5px; }
.child-row .product-code { color: #4a4d86; font-size: 12.5px; font-weight: 500; }
.child-row .product-name { display: block; color: #2e2e45; font-weight: 400; line-height: var(--line); }
.child-row .cell-meta { color: var(--muted-foreground); font-size: 12.5px; }
.child-row .stock-value { color: var(--foreground); font-size: 14.5px; font-weight: 650; }
/* The child's share of the parent total, in the same core color as its segment in the parent bar. */
.share { display: block; inline-size: 56px; block-size: 3px; overflow: hidden; border-radius: 2px; background: var(--track); }
.share i { display: block; inline-size: max(var(--share), 3px); block-size: 100%; background: var(--core); }
.share[data-core="7"] i { box-shadow: inset 0 0 0 1px #b4b4c6; }

/* Trunk: runs down from the parent's toggle outside the child band, with one elbow into each child's chip at the
   height of its first line. Offsets are relative to the child gutter (it starts after the band's 1px border). */
.cell-gutter { position: relative; align-self: stretch; }
.child { --to-trunk: calc(var(--trunk-x) - var(--l2-start)); --knee: calc(var(--line) / 2); }
.child-row .cell-gutter::before { content: ""; position: absolute; inset-inline-start: var(--to-trunk); inset-block: -7px -8px; inline-size: 2px; background: var(--branch); }
.child:first-child .cell-gutter::before { inset-block-start: -14px; }
.child.is-last .cell-gutter::before { inset-block-end: auto; block-size: calc(7px + var(--knee) + 1px); }
.child:first-child.is-last .cell-gutter::before { block-size: calc(14px + var(--knee) + 1px); }
.child-row .cell-gutter::after { content: ""; position: absolute; inset-inline-start: var(--to-trunk); inset-block-start: calc(var(--knee) - 1px); inline-size: calc(4px - var(--to-trunk)); block-size: 2px; background: var(--branch); }
.group.is-open .child-row .cell-gutter::before, .group.is-open .child-row .cell-gutter::after { background: #d9c77a; }
.core-chip { position: absolute; z-index: 1; inset-inline-start: 4px; inset-block-start: calc(var(--knee) - 5px); inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--core); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--branch); }
.core-chip[data-core="7"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #b4b4c6, inset 0 0 0 1px #b4b4c6; }

/* ===== Level 3 — spools and colors (نوع کالا), under the child's stock number ===== */
/* A wire color is drawn as the cut end of the wire: colored insulation around a copper core. */
.wire-end { --size: 14px; position: relative; display: inline-block; flex: none; inline-size: var(--size); block-size: var(--size); border-radius: 50%; background: var(--sheath-fill, #c9c9d6); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.wire-end::after { content: ""; position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3c79b 0%, #c47a3c 55%, #8f5021 100%); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.wire-end.is-light { box-shadow: inset 0 0 0 1px #a9a9bd; }
.wire-end.is-unknown { background: repeating-linear-gradient(45deg, #d6d6e2 0 3px, #ececf3 3px 6px); }
.reel { inline-size: 14px; block-size: 14px; color: var(--sheath); }

/* The third level spans the item's name and stock tracks; subgrid keeps quantities aligned. */
.types { --t3: 12px; --type-line: 28px; display: grid; grid-column: 3 / 6; grid-template-columns: var(--col-name) var(--col-stock) var(--col-warehouse); grid-template-columns: subgrid; column-gap: 12px; min-inline-size: 0; margin-block-start: 4px; }
.types-toggle { display: inline-flex; align-items: center; gap: 6px; grid-column: 1 / -1; justify-self: start; min-block-size: 32px; padding-block: 0; padding-inline: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: #4b4b62; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.types-toggle:hover { background: var(--accent); color: var(--primary); }
.types.is-open .types-toggle { color: var(--primary); }
.types-chevron { inline-size: 12px; block-size: 12px; transform: rotate(90deg); transition: transform .25s var(--ease-out); }
.types.is-open .types-chevron { transform: rotate(0deg); }
.types-dots { display: inline-flex; padding-inline-start: 2px; }
.types-dots .wire-end { --size: 11px; margin-inline-start: -3px; box-shadow: 0 0 0 1.5px var(--surface), inset 0 0 0 1px rgb(0 0 0 / .18); }
.types-dots .wire-end:first-child { margin-inline-start: 0; }
.types-dots .wire-end::after { display: none; }
.types.is-open .types-dots { display: none; }
/* One-pixel branches connect labels; each smaller quantity sits below the item's stock. */
.types-body { display: grid; grid-column: 1 / -1; grid-template-columns: var(--col-name) var(--col-stock) var(--col-warehouse); grid-template-columns: subgrid; grid-template-rows: 0fr; column-gap: 12px; transition: grid-template-rows .25s var(--ease-out); }
.types.is-open .types-body { grid-template-rows: 1fr; }
.types-body > .type-list { min-block-size: 0; overflow: hidden; }
.type-list { display: grid; grid-column: 1 / -1; grid-template-columns: var(--col-name) var(--col-stock) var(--col-warehouse); grid-template-columns: subgrid; column-gap: 12px; margin: 0; padding: 0; list-style: none; }
.types.is-open .type-list { padding-block: 0 4px; }
.type-chip { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: var(--col-name) var(--col-stock) var(--col-warehouse); grid-template-columns: subgrid; align-items: center; column-gap: 12px; min-block-size: var(--type-line); border-radius: 4px; font-size: 12px; line-height: 1.5; transition: background-color .15s ease; }
.type-chip:hover { background: var(--muted); }
.type-chip::before, .type-chip::after { content: ""; position: absolute; inset-inline-start: var(--t3); background: #d9c77a; pointer-events: none; }
.type-chip::before { inset-block: 0; inline-size: 1px; }
.type-chip:first-child::before { inset-block-start: -16px; }
.type-chip:last-child::before { inset-block-end: 50%; }
.type-chip::after { inset-block-start: 50%; inline-size: 12px; block-size: 1px; }
.type-label { display: flex; align-items: center; gap: 7px; min-inline-size: 0; padding-block: 4px; padding-inline: calc(var(--t3) + 18px) 8px; }
.type-name { min-inline-size: 0; overflow-wrap: anywhere; color: #2c2c44; }
.type-stock { display: inline-flex; align-items: baseline; gap: 6px; min-inline-size: 0; padding-block: 4px; }
.type-stock .stock-unit { font-size: 11px; }
.type-qty { color: #45455e; font-weight: 550; font-variant-numeric: tabular-nums; }
/* Spool identifiers retain leading zeroes and use a measured, tabular data face. */
.spool-no { color: #353878; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spool-connection { position: relative; flex: 1 1 24px; min-inline-size: 12px; block-size: 1px; margin-inline-start: 6px; overflow: hidden; }
.spool-connection::before { content: ""; position: absolute; inset-inline: -12px; inset-block-start: 0; border-block-start: 1px dashed var(--gold-500); }
.type-chip.is-untyped .type-name { color: var(--muted-foreground); }
/* Types that match the search are marked with the brand gold. */
.type-chip.is-match { background: var(--gold-100); }
.type-chip.is-match .type-qty { color: #4d3b05; }

/* Parent summary under its total: stock per color across all children, or the number of spools. */
.type-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; max-inline-size: 200px; color: #45455e; font-size: 12px; line-height: 1.5; }
.type-summary-colors { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.summary-color { display: inline-flex; align-items: center; gap: 4px; }
.summary-color .wire-end { --size: 12px; }
.summary-color .type-qty { font-weight: 600; color: #2c2c44; }
.type-summary-spools { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.type-summary-spools .reel { inline-size: 13px; block-size: 13px; }
/* ===== Cells ===== */
.product-code { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; font-weight: 600; color: #353878; white-space: nowrap; letter-spacing: .1px; }
.code-cell { display: inline-flex; align-items: center; gap: 6px; direction: ltr; max-inline-size: 100%; }
.copy-code { display: inline-grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #8585a0; transition: background-color 140ms, color 140ms; }
.copy-code svg { inline-size: 15px; block-size: 15px; }
.copy-code:hover, .copy-code:focus-visible { color: var(--primary); background: var(--accent); }
.copy-code.copied { color: var(--in-stock); background: #e7f4ee; }
.product-name { margin: 0; font-weight: 500; line-height: 1.8; }
.unit-cell { color: var(--muted-foreground); }
.stock { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-value { font-size: 14.5px; font-weight: 700; }
.stock-zero, .stock-negative { color: var(--unavailable); }
.stock-note { font-size: 11px; font-weight: 500; }
.stock-unknown { color: var(--muted-foreground); font-size: 13px; }

/* ===== Footer and pagination ===== */
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-block-start: 1px solid var(--border); }
.table-footer:empty { display: none; }
.result-range { margin: 0; color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.result-range strong { font-weight: 600; color: var(--foreground); }
.footer-controls { display: flex; align-items: center; gap: 22px; }
.page-size-control { display: flex; align-items: center; gap: 9px; color: var(--muted-foreground); font-size: 13px; }
.page-size-control .native-select-wrap { inline-size: 72px; }
.page-size-control .ui-native-select { min-block-size: 38px; padding-inline-start: 12px; }
.pagination { display: flex; align-items: center; gap: 3px; }
.pagination .ui-button { min-block-size: 38px; inline-size: 38px; padding: 0; font-variant-numeric: tabular-nums; }
.pagination .ui-button[aria-current="page"] { background: var(--primary); color: var(--gold-300); border-color: var(--primary); }
.pagination-ellipsis { padding-inline: 5px; color: var(--muted-foreground); }
.mobile-page-number { display: none; }

/* ===== States ===== */
.empty-state { min-block-size: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.empty-state h2 { margin: 0; font-size: 17px; font-weight: 700; color: #26263f; text-wrap: balance; }
.empty-state p { margin: 0; max-inline-size: 440px; color: var(--muted-foreground); font-size: 14px; }
.empty-state .ui-button { margin-block-start: 10px; }
.empty-icon { display: grid; place-items: center; inline-size: 46px; block-size: 46px; margin-block-end: 6px; border-radius: 12px; color: #8b5a55; background: var(--unavailable-soft); }
.empty-icon svg { inline-size: 21px; block-size: 21px; }
.loading-state { padding: 4px 18px; }
.skeleton-row { display: grid; grid-template-columns: 84px minmax(0, 2fr) minmax(0, 1fr) 64px; align-items: center; gap: 24px; min-block-size: 80px; border-block-end: 1px solid var(--border-soft); }
.skeleton-row:last-child { border-block-end: 0; }
.skeleton { display: block; block-size: 12px; max-inline-size: 85%; border-radius: 4px; background: #e7e7ee; animation: skeleton-fade 1.3s ease-in-out infinite alternate; }
.skeleton-chip { inline-size: 56px; block-size: 36px; border-radius: 9px; }
.skeleton-wide { max-inline-size: 70%; block-size: 14px; }
.skeleton-short { max-inline-size: 40px; }
@keyframes skeleton-fade { to { opacity: .45; } }
.noscript { padding: 16px; color: var(--unavailable); }

.toast { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; z-index: 70; transform: translateX(50%); padding: 10px 18px; border-radius: 999px; background: #23255a; color: #fff; font-size: 14px; box-shadow: var(--shadow-float); animation: toast-in .25s var(--ease-out); pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(50%, 8px); } }

.site-footer { display: flex; justify-content: space-between; gap: 15px; padding-block: 18px 22px; border-block-start: 1px solid var(--border); color: var(--muted-foreground); font-size: 12.5px; }

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .site-header-inner, .inventory-tools, .inventory-page, .site-footer { inline-size: calc(100% - 48px); }
  .site-header-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) and (max-width: 1199px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar-more { display: block; flex: 1 1 100%; }
  .toolbar-more-inner { display: flex; align-items: center; gap: 12px; }
  .mobile-sort { display: flex; flex: 1; max-inline-size: 320px; }
  .mobile-sort .native-select-wrap { inline-size: 100%; }
  .result-count { margin-inline-start: auto; }
}

/* ===== Card rows below 1200px: the table never needs horizontal scrolling ===== */
@media (max-width: 1199px) {
  .tree-grid { min-inline-size: 0; font-size: 14px; }
  .tree-grid .tree-header.row { display: none; }
  .tree-grid .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; }
  .group-head { min-block-size: 0; }
  .group-head .cell-name { order: 1; flex: 1 1 100%; }
  .group-head .cell-gutter { order: 2; padding: 0; }
  .group-head .cell-code { order: 3; }
  .group-head .cell-inventory { order: 4; margin-inline-start: auto; justify-items: end; }
  .group-head .meta-cells { display: none; }
  .group-head .cell-warehouse { order: 5; flex: 1 1 100%; }
  .cell-warehouse::before { content: attr(data-label) ": "; color: var(--muted-foreground); }
  .cell-warehouse > .warehouse-details { display: block; }
  /* In a card the cell is as wide as the row; keep each name and figure a readable pair instead of
     pushing them to opposite ends of the card. */
  .warehouse-breakdown { max-inline-size: min(100%, 24rem); }
  .warehouse-details > summary { min-block-size: 44px; }
  .parent-name { font-size: 15px; }
  .tree-toggle { min-block-size: 40px; min-inline-size: 52px; }
  /* Narrow screens keep the tree: the gutter moves into the inset beside each child, so the trunk, elbows
     and core chips still connect parent → child. */
  .child-list { margin-inline: 22px 6px; }
  .tree-grid .child-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 9px 12px; }
  .child-row .cell-name, .child-row .meta-cells { grid-column: 1 / -1; }
  .child-row .cell-code { grid-column: 1; }
  .child-row .cell-inventory { grid-column: 2; }
  .child-row .types { grid-column: 1 / -1; }
  .child-row .cell-warehouse { grid-column: 1 / -1; order: 4; }
  .type-chip > .type-warehouse { grid-column: 1 / -1; padding-inline-start: calc(var(--t3) + 18px); }
  .type-warehouse::before { content: attr(data-label) ": "; color: var(--muted-foreground); }
  .type-warehouse > .warehouse-details { display: block; }
  .child { --to-trunk: 0px; --knee: 11px; }
  .child:not(.is-last)::after { inset-inline: 12px 0; }
  .child-row .cell-gutter { position: absolute; inset-block: 9px; inset-inline-start: -14px; inline-size: 14px; padding: 0; }
  .child-row .cell-gutter::before { inset-block: -9px; }
  .child:first-child .cell-gutter::before { inset-block-start: -15px; }
  .child.is-last .cell-gutter::before { block-size: calc(9px + var(--knee) + 1px); }
  .child:first-child.is-last .cell-gutter::before { block-size: calc(15px + var(--knee) + 1px); }
  .child-row .cell-name { order: 1; flex: 1 1 100%; }
  /* Code and stock share one line; the stock column keeps its spool/color list on its own side. */
  .child-row .cell-code, .group-head .cell-code { flex: 1 1 0; }
  .child-row .cell-inventory, .group-head .cell-inventory { flex: 0 1 auto; max-inline-size: 62%; }
  .child-row .cell-code { order: 2; align-self: flex-start; }
  .child-row .cell-inventory { order: 3; max-inline-size: none; justify-items: start; }
  .meta-cells { order: 6; display: flex; flex-wrap: wrap; gap: 0 14px; flex: 1 1 100%; }
  .cell-meta { font-size: 12.5px; }
  .cell-meta::before { content: attr(data-label); margin-inline-end: 4px; color: var(--muted-foreground); }
  .child-row .cell-meta, .child-row .cell-name, .child-row .cell-code { min-block-size: 0; }
  .types { --col-name: minmax(0, 1fr); --col-stock: auto; --type-line: 32px; order: 5; grid-template-columns: var(--col-name) var(--col-stock); grid-template-columns: subgrid; inline-size: 100%; min-inline-size: 0; margin-block-start: 0; }
  .types-body, .type-list, .type-chip { grid-template-columns: var(--col-name) var(--col-stock); grid-template-columns: subgrid; }
  .type-stock { justify-self: start; }
  .type-stock .stock-unit { font-size: 12px; }
  .type-label .wire-end { --size: 13px; }
  .types-toggle { min-block-size: 36px; padding-inline: 6px 10px; font-size: 12.5px; }

  .type-chip { font-size: 12px; }
  .type-chip:first-child::before { inset-block-start: -18px; }
  .type-summary { justify-content: flex-end; }
  .child-row .copy-code { inline-size: 32px; block-size: 32px; margin-block: 0; }
  .child-row .code-cell { block-size: auto; }
}@media (max-width: 759px) {
  .site-header-inner, .inventory-tools, .inventory-page, .site-footer { inline-size: calc(100% - 32px); }
  :root { --hdr-h: 44px; }
  .site-header-inner { --hdr-pad: 10px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; }
  .dock-holder[data-stuck="true"] .site-header-inner { --hdr-h: 44px; --hdr-pad: 4px; row-gap: 0; }
  .site-header-inner > .header-tools { grid-column: 1 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; gap: 8px; max-block-size: 44px; overflow: hidden; padding: 2px; margin: -2px; transition: max-block-size 320ms var(--ease-out), opacity 220ms, visibility 0s linear 0s; }
  .dock-holder[data-stuck="true"] .site-header-inner > .header-tools { max-block-size: 0; opacity: 0; visibility: hidden; transition: max-block-size 320ms var(--ease-out), opacity 200ms, visibility 0s linear 320ms; }
  .site-header-inner > .staff-toggle { grid-column: 2; grid-row: 1; }
  .brand-art { inline-size: min(60vw, 212px); }
  .dock-holder[data-stuck="true"] .brand-art { inline-size: min(54vw, 188px); }
  .brand-caption { display: none; }
  .staff-toggle span { display: none; }
  .staff-toggle { inline-size: 44px; min-block-size: 44px; padding: 0; }
  .stock-summary { padding-inline: 10px; font-size: 12px; }
  .total-count { font-size: 12px; }
  .inventory-tools { padding-block: 12px 10px; }
  .dock-holder[data-stuck="true"] .inventory-tools { padding-block: 4px 8px; }
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 12px; }
  .search-box { grid-column: 1 / -1; min-inline-size: 0; max-inline-size: none; block-size: 50px; }
  .dock-holder[data-stuck="true"] .search-box { block-size: 44px; }
  .ui-input.search-input { font-size: 16px; }
  .search-shortcut { display: none; }
  .search-clear { inline-size: 44px; block-size: 44px; inset-inline-end: 2px; }
  .filter-toggle { grid-column: 2; grid-row: 2; inline-size: 44px; min-block-size: 44px; padding: 0; }
  .column-picker { grid-column: 3; grid-row: 2; min-block-size: 44px; }
  .dock-holder[data-stuck="true"] .column-picker { min-block-size: 44px; }
  .dock-holder[data-stuck="true"] .filter-toggle { inline-size: 44px; min-block-size: 44px; }
  .filter-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .filter-count { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; box-shadow: 0 0 0 2px var(--surface); }
  .toolbar-more, .toolbar-more-inner { display: contents; }
  .result-count { grid-column: 1; grid-row: 3; margin: 0; font-size: 12px; white-space: normal; }
  .mobile-sort { display: flex; grid-column: 1; grid-row: 2; min-inline-size: 0; }
  .dock-holder[data-stuck="true"] .result-count, .dock-holder[data-stuck="true"] .tree-actions { display: none; }
  .mobile-sort .native-select-wrap { inline-size: 100%; }
  .mobile-sort .ui-native-select { font-size: 14px; }
  .tree-actions { grid-column: 2 / -1; grid-row: 3; justify-self: end; padding: 2px; }
  .tree-action { inline-size: 44px; min-block-size: 44px; padding: 0; }
  .tree-action svg { inline-size: 18px; block-size: 18px; }
  .tree-action-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .filter-panel { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .filter-panel .ui-native-select { font-size: 16px; }
  .filter-reset { justify-self: stretch; min-block-size: 44px; }
  .filter-chip { min-block-size: 40px; }
  .table-footer { flex-wrap: wrap; justify-content: center; padding: 14px; gap: 12px; }
  .result-range { flex-basis: 100%; text-align: center; }
  .footer-controls { inline-size: 100%; justify-content: space-between; gap: 12px; }
  .pagination .ui-button { inline-size: 44px; min-block-size: 44px; }
  .pagination .number-button, .pagination .pagination-ellipsis { display: none; }
  .mobile-page-number { display: inline; min-inline-size: 48px; text-align: center; color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
  .empty-state { min-block-size: 240px; }
  .loading-state { padding-inline: 14px; }
  .skeleton-row { grid-template-columns: 56px minmax(0, 1fr); min-block-size: 96px; }
  .skeleton-row .skeleton:nth-child(n+3) { display: none; }
  .site-footer span:last-child { display: none; }
}
@media (max-width: 359px) {
  .page-size-control { gap: 5px; font-size: 12px; }
  .page-size-control .native-select-wrap { inline-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .skip-link, .dock-holder, .footer-controls, .tree-toggle, .tree-actions, .toast, .site-footer { display: none !important; }
  body { background: #fff; }
  .inventory-page { inline-size: 100%; margin: 0; padding: 0; }
  .results-region { border: 0; box-shadow: none; }
  .tree-grid { min-inline-size: 0; font-size: 11px; }
  .group-body { grid-template-rows: 1fr; }
  .child { opacity: 1; transform: none; }
  .types-body { grid-template-rows: 1fr; }
  .types-toggle { display: none; }
  .warehouse-details { display: none !important; }
  .warehouse-print { display: block; overflow-wrap: anywhere; }
  .table-shell[data-pending="true"] { opacity: 1; }
  .sort-inactive { display: none; }
  .group-head, .seg, .core-chip, .wire-end, .wire-end::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}