@import url("./tokens/base.39e06049f4e1.css");

* {
  box-sizing: border-box;
}

[x-cloak] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--surface-app);
}

body {
  min-height: 100vh;
  margin: var(--space-0);
  background: var(--surface-app);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
a {
  transition: var(--transition-control);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--space-0);
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: var(--space-0);
}

.motion-panel {
  transition: var(--transition-panel);
}

.motion-enter {
  animation: motion-enter var(--dur-enter) var(--ease-out) both;
}

.motion-exit {
  animation: motion-exit var(--dur-exit) var(--ease-in) both;
}

.motion-pulse {
  animation: motion-pulse var(--dur-pulse) var(--ease-standard) infinite;
}

@keyframes motion-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

@keyframes motion-exit {
  to {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-2)));
  }
}

@keyframes motion-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--focus-ring);
  }

  50% {
    box-shadow: 0 0 0 var(--space-2) transparent;
  }
}

.topbar {
  background: var(--surface-card);
  border-bottom: var(--border-width) solid var(--border-default);
}

.topbar__inner,
.main-nav__inner,
.workspace {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.topbar__inner {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

.topbar__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.context-label {
  margin: var(--space-0);
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.title-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.title-line h1 {
  margin: var(--space-0);
  color: var(--text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.title-line span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.user-panel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Positioned so .notif-panel can anchor to IT instead of .notif-bell on
     narrow screens (see the ≤640 rule below) — inert on wider screens,
     where .notif-bell (closer in the tree) stays the actual anchor. */
  position: relative;
}

.user-panel__text {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-snug);
  text-align: right;
}

.user-panel__text strong {
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.user-panel__text span {
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

.icon-button,
.nav-toggle {
  display: grid;
  width: var(--control-h-md);
  height: var(--control-h-md);
  place-items: center;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-muted);
}

.icon-button:hover,
.nav-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}

.icon-button svg,
.nav-toggle svg,
.search-control svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.nav-toggle {
  display: none;
}

.main-nav {
  border-top: var(--border-width) solid var(--border-subtle);
}

.main-nav__inner {
  display: flex;
  min-height: 42px;
  align-items: stretch;
  gap: var(--space-7);
}

.main-nav__link {
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.main-nav__link--active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.main-nav__link--disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: var(--space-7);
  padding-block: var(--space-7) var(--space-12);
}

.workspace__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.workspace--single {
  grid-template-columns: minmax(0, 1fr);
}

.filter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

/* Пошук — окремий перший рядок на всю ширину картки; селекти й лічильник
   переносяться на другий рядок і більше не виїжджають за край картки. */
.search-control {
  position: relative;
  min-width: 200px;
  flex: 1 1 100%;
}

.search-control svg {
  position: absolute;
  top: 50%;
  left: var(--space-5);
  color: var(--text-faint);
  pointer-events: none;
  transform: translateY(-50%);
}

.filter-card input,
.filter-card select {
  height: var(--control-h-md);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--text-sm);
}

.filter-card input {
  width: 100%;
  padding: var(--space-0) var(--space-5) var(--space-0) var(--space-9);
}

.filter-card select {
  max-width: 200px;
  padding: var(--space-0) var(--space-9) var(--space-0) var(--space-5);
}

.filter-card select:disabled {
  background: var(--surface-disabled);
  color: var(--text-faint);
  cursor: not-allowed;
}

.filter-card__count {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  color: var(--text-faint);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* E2 (ПЛАН-21.09 «Сума над реєстрами»): сидить одразу за лічильником —
   лічильник уже несе margin-left: auto, тому сума лишається праворуч,
   без другого auto-відступу. */
.filter-card__sum {
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.loading-indicator {
  display: none;
  width: var(--space-5);
  height: var(--space-5);
  border: 2px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: spin var(--dur-slow) linear infinite;
}

.loading-indicator.htmx-request {
  display: inline-block;
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-sheen) 45%,
    var(--skeleton-base) 65%
  );
  background-size: 200% 100%;
  animation: skeleton-sheen var(--dur-skeleton) ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes skeleton-sheen {
  to {
    background-position: -200% 0;
  }
}

.scope-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.scope-note span {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-style: italic;
  font-weight: var(--fw-semibold);
}

.scope-note p {
  margin: var(--space-0);
}

.table-card {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.stock-table.tabulator {
  --row-min-h: var(--row-min-h-standard);

  border: 0;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

[data-density="compact"] {
  --pad-cell-y: var(--pad-cell-y-compact);
  --row-min-h: var(--row-min-h-compact);
}

.stock-table .tabulator-header {
  border-bottom: 2px solid var(--border-default);
  background: var(--surface-header);
  color: var(--text-muted);
}

.stock-table .tabulator-header .tabulator-col {
  border-right: 0;
  background: var(--surface-header);
}

.stock-table .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 10px var(--pad-cell-x);
}

.stock-table .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}

.stock-table .tabulator-header .tabulator-col.available-column {
  border-left: var(--border-width) solid var(--green-100);
  border-bottom: 0;
  background: var(--surface-emphasis);
  color: var(--num-available);
}

.stock-table .tabulator-tableholder {
  overflow-x: auto;
}

.stock-table .tabulator-row {
  min-height: var(--row-min-h);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
}

.stock-table .tabulator-row:hover {
  background: var(--surface-hover);
}

.stock-table .tabulator-row.stock-row--selected {
  background: var(--surface-selected);
}

.stock-table .tabulator-row.stock-row--disabled {
  background: var(--surface-disabled);
  color: var(--text-faint);
}

.stock-table .tabulator-row .tabulator-cell {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-right: 0;
  white-space: normal;
}

.stock-table .tabulator-row .tabulator-cell.available-column {
  justify-content: flex-end;
  border-left: var(--border-width) solid var(--green-100);
  background: var(--surface-emphasis);
}

.stock-table .tabulator-placeholder {
  min-height: 160px;
  background: var(--surface-card);
  color: var(--text-faint);
  font-size: var(--text-base);
}

.item-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.item-name strong {
  overflow: hidden;
  color: var(--text-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name span {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.stock-number {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-features);
}

.stock-number--physical {
  color: var(--num-physical);
  font-weight: var(--fw-medium);
}

.stock-number--reserved {
  color: var(--num-reserved);
}

.stock-number--available {
  color: var(--num-available);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}

.stock-number--muted {
  color: var(--text-faint);
}

.cart-toggle-form {
  display: grid;
  place-items: center;
}

.cart-toggle-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: var(--space-0);
  accent-color: var(--accent);
}

.stock-qty-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.stock-qty-control input {
  width: 62px;
  height: var(--control-h-sm);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.stock-qty-control input.stock-qty-input--warning {
  border-color: var(--red-500);
  color: var(--red-500);
}

.stock-qty-control span,
.stock-qty-static {
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.cart-panel {
  position: sticky;
  top: var(--space-7);
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.cart-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.cart-panel__header h2 {
  margin: var(--space-0);
  color: var(--text-strong);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}

.cart-panel__header p {
  margin: var(--space-1) var(--space-0) var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.cart-panel__clear {
  padding: var(--space-1) var(--space-0);
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.cart-panel__clear:hover {
  color: var(--red-500);
}

.cart-panel__error {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width) solid var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
  font-size: var(--text-xs);
}

.cart-panel__lines {
  display: flex;
  max-height: calc(100vh - 310px);
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: 10px;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.cart-line--warning {
  border-color: var(--red-100);
}

.cart-line__details {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.cart-line__details strong {
  overflow: hidden;
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__details span {
  margin-top: var(--space-1);
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.cart-line__qty {
  color: var(--text-body);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.cart-line--warning .cart-line__qty {
  color: var(--red-500);
}

.cart-line__remove {
  width: 26px;
  height: 26px;
  padding: var(--space-0);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  font-size: 19px;
  line-height: 1;
}

.cart-line__remove:hover {
  background: var(--red-50);
  color: var(--red-500);
}

.cart-panel__footer {
  padding: 14px var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-header);
}

.cart-panel__destination {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.cart-panel__destination select {
  width: 100%;
  height: var(--control-h-md);
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.cart-panel__destination textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-strong);
  resize: vertical;
}

.cart-panel__assignment-warning {
  color: var(--status-rejected-fg) !important;
}

.cart-panel__footer .button:disabled {
  background: var(--accent);
  color: var(--text-on-accent);
  opacity: 0.58;
}

.cart-panel__footer p {
  margin: var(--space-4) var(--space-0) var(--space-0);
  color: var(--text-faint);
  font-size: var(--text-2xs);
  text-align: center;
}

.cart-panel__empty {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}

.cart-panel__empty-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  color: var(--text-faint);
  font-size: 26px;
  font-weight: var(--fw-regular);
}

.cart-panel__empty strong {
  color: var(--gray-700);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

.cart-panel__empty p {
  max-width: 240px;
  margin: var(--space-0);
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.fallback-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.fallback-table th,
.fallback-table td {
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: left;
}

.fallback-table small {
  display: block;
  color: var(--text-faint);
}

.login-page {
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.login-card {
  width: min(100%, 420px);
  padding: var(--space-9);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}

.login-card h1 {
  margin: var(--space-3) var(--space-0) var(--space-0);
  color: var(--text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
}

.login-card__lead {
  margin: var(--space-5) var(--space-0) var(--space-8);
  color: var(--text-muted);
}

.login-card__hint {
  margin: var(--space-5) var(--space-0) var(--space-0);
  color: var(--text-faint);
  font-size: var(--text-xs);
  text-align: center;
}

/* Row actions in the users table: a stacked pair, each on one line. */
.fallback-table .inline-form {
  display: block;
  margin-top: var(--space-3);
}

.fallback-table .inline-form .button {
  width: 100%;
  white-space: nowrap;
}

/* The issued link code: monospace and easy to select, since it is read aloud
   or copied by hand and shown exactly once. */
.invite-code {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  user-select: all;
  word-break: break-all;
}

/* First-login binding. A quiet, foldable affordance: almost everyone signs in
   with the button above, and only a first-time person needs the code. It must
   read as secondary to that button -- never as a second, competing entry. */
.login-card__invite {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--border-default);
  text-align: center;
}

/* The native disclosure triangle is a raw black glyph that outweighs
   everything around it. Replaced with a chevron in the muted text colour. */
.login-card__invite summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}

.login-card__invite summary::-webkit-details-marker {
  display: none;
}

.login-card__invite summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform 140ms ease;
}

.login-card__invite[open] summary::after {
  transform: translateY(-2px) rotate(45deg);
}

.login-card__invite summary:hover,
.login-card__invite summary:focus-visible {
  color: var(--text-strong);
}

.login-card__invite-body {
  margin-top: var(--space-6);
  text-align: left;
}

.login-card__invite .login-card__hint {
  margin: var(--space-0) var(--space-0) var(--space-6);
  text-align: left;
}

.login-card__invite .field {
  display: block;
  margin-bottom: var(--space-5);
}

.login-card__invite .field__label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.login-card__invite .field__input {
  width: 100%;
  height: var(--control-h-md);
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--text-sm);
}

/* Secondary on purpose: two primary buttons would make the rare first-login
   path look like the main way in. Full width so it still owns this block. */
.login-card__invite .button {
  width: 100%;
}

.button {
  display: inline-flex;
  min-height: var(--control-h-lg);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-7);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.button--primary {
  width: 100%;
  background: var(--accent);
  color: var(--text-on-accent);
}

.button--primary:hover {
  background: var(--accent-hover);
}

.button--fit {
  width: auto;
}

.button--small {
  min-height: var(--control-h-md);
  padding-inline: var(--space-5);
  font-size: var(--text-xs);
}

.button--secondary {
  border-color: var(--border-strong);
  background: var(--surface-card);
  color: var(--text-body);
}

.button--secondary:hover {
  background: var(--surface-hover);
}

.button--danger {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

/* Asset card ------------------------------------------------------------- */

.item-name__asset-link {
  color: inherit;
  text-decoration: none;
}

.item-name__asset-link {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* 🚨 ВИМІРЯНО НА ЖИВОМУ ПРОДІ 08.09 (ДЕПЛОЙ 3, крок 5). Власник попросив
   «зробити перехід у картку активу зі складу» — а перехід УЖЕ БУВ: рядок
   ніс `a.item-name__asset-link` на /assets/<id>/, з :hover і cursor:pointer.
   Невидимим його робив спокій, а не відсутність:

     колір посилання  rgb(51,51,51)      підкреслення  none
     колір тексту     rgb(31,41,55)      вага          400 (як текст)

   Тобто дізнатися про функцію можна було ЛИШЕ навівши мишу — а на екрані
   зі списком її ніхто не наводить просто так. Клас той самий, що ловимо
   весь тиждень, тільки в інтерфейсі: ФУНКЦІЯ Є, ДОКАЗУ ЇЇ ІСНУВАННЯ ДЛЯ
   ЛЮДИНИ НЕМАЄ. Дзеркало до картки співробітника, де навпаки — входу не
   було зовсім.

   Береться `--text-link` — той самий токен, який ДИЗАЙН уже обрав для
   цього ж посилання в :hover нижче. Зразок один і названий: свого кольору
   тут не вигадується. ДИЗАЙНУ — на перегляд після запуску. */
.item-name__asset-link strong {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}

.item-name__asset-link:hover strong {
  color: var(--text-link);
  text-decoration: underline;
}

.stock-table .tabulator-row.stock-row--asset {
  cursor: pointer;
}

.asset-card-loading,
.asset-card-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
}

.asset-card-loading {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 720px);
}

.asset-card-loading.htmx-request {
  display: grid;
}

.asset-card-loading__backdrop,
.asset-card-overlay__backdrop {
  border: 0;
  background: color-mix(in srgb, var(--gray-900) 42%, transparent);
}

.asset-card-loading__sheet,
.asset-card-overlay__sheet {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  background: var(--surface-app);
  box-shadow: var(--shadow-lg);
}

.asset-card-loading__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-9);
}

.asset-card-loading__title,
.asset-card-loading__line,
.asset-card-loading__block {
  display: block;
}

.asset-card-loading__title {
  width: 58%;
  height: var(--space-9);
}

.asset-card-loading__line {
  width: 82%;
  height: var(--space-6);
}

.asset-card-loading__block {
  width: 100%;
  height: 240px;
  margin-top: var(--space-5);
}

.asset-card-overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 720px);
}

.asset-card-overlay__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: default;
}

.asset-card-overlay__sheet {
  grid-column: 2;
  height: 100%;
  padding: var(--space-8);
  outline: 0;
}

.asset-card-overlay__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* «+ Додати» в реєстрі матеріалів (ПЛАН-БЕК v2 §2.5): форма в аркуші панелі
   картки — поля стовпчиком на всю ширину, як на екрані заведення позиції
   (там це дає .filter-card, якого в аркуші немає). */
.material-add-form {
  max-width: 480px;
}

.material-add-form .admin-form__field > span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.material-add-form .admin-form__control {
  width: 100%;
}

.material-add-form textarea.admin-form__control {
  font: inherit;
  resize: vertical;
}

.material-add-form .admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.material-add-form .admin-form__actions .button {
  width: auto;
  flex: 0 0 auto;
}

.asset-card-overlay__toolbar .icon-button {
  flex: 0 0 auto;
  font-size: var(--text-xl);
  line-height: 1;
}

.asset-card-page .workspace__main {
  width: min(100%, 1040px);
  margin-inline: auto;
}

.asset-card {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.asset-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-8);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.asset-card__heading h2,
.asset-card__heading p,
.asset-card__section h3,
.asset-card__section p,
.asset-card--unavailable h2,
.asset-card--unavailable p {
  margin: var(--space-0);
}

.asset-card__heading h2 {
  margin-top: var(--space-2);
  color: var(--text-strong);
  font-size: var(--text-2xl);
}

.asset-card__heading > div > p:last-child {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.asset-card__eyebrow {
  color: var(--text-link);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.asset-card__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-0);
  padding: var(--space-7) var(--space-8);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.asset-card__facts div,
.asset-card__future div {
  min-width: 0;
}

.asset-card__facts dt,
.asset-card__future span,
.asset-card__section-heading > p {
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.asset-card__facts dd {
  overflow-wrap: anywhere;
  margin: var(--space-2) var(--space-0) var(--space-0);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}

.asset-card__section {
  padding: var(--space-7) var(--space-8);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.asset-card__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.asset-card__section-heading > span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.asset-card__section h3 {
  color: var(--text-strong);
  font-size: var(--text-lg);
}

.asset-card__holder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3) !important;
  color: var(--text-body);
  font-size: var(--text-sm);
}

.asset-card__holder span {
  color: var(--text-muted);
}

.asset-card__history {
  overflow-x: auto;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}

.asset-card__history table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.asset-card__history th,
.asset-card__history td {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.asset-card__history th {
  background: var(--surface-header);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.asset-card__history tr:last-child td {
  border-bottom: 0;
}

.asset-card__history time,
.asset-card__document-ref {
  white-space: nowrap;
}

.asset-card__document-ref {
  font-family: var(--font-mono);
}

.asset-card__empty {
  padding: var(--space-7);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

/* Хвиля «структура ДО заливки» (04.09): «останній результат» і підзаголовки
   розділу «Інвентаризації»; сирий архів — згорнутий details. */
.asset-card__last-inventory {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--surface-sunken);
  border-radius: var(--radius-control, 6px);
}

.asset-card__last-inventory > span {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.asset-card__subheading {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* Довгі клітинки зі старого обліку (нерозібрана НВП-клітинка цілком у
   примітці, довгі заголовки колонок-джерел) — переносити, не розтягувати. */
.asset-card__note-cell {
  max-width: 32rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.asset-card__archive > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.asset-card__archive[open] > summary {
  margin-bottom: var(--space-3);
}

.asset-card__legacy-history-list {
  margin: var(--space-0);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  font-size: var(--text-xs);
}

.asset-card__legacy-history-list li {
  padding: var(--space-2) var(--space-0);
  border-bottom: var(--border-width) solid var(--border-subtle);
  white-space: nowrap;
}

.asset-card__legacy-history-list li:last-child {
  border-bottom: 0;
}

.asset-card__future {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-7) var(--space-8);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-header);
}

.asset-card__future div {
  display: flex;
  min-height: var(--control-h-lg);
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.asset-card__future strong {
  margin-top: var(--space-2);
  color: var(--text-faint);
}

.asset-card--unavailable {
  display: grid;
  min-height: 320px;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-9);
  text-align: center;
}

.asset-card--unavailable__mark {
  display: grid;
  width: var(--space-10);
  height: var(--space-10);
  place-items: center;
  border: var(--border-width) solid var(--status-rejected-bd);
  border-radius: var(--radius-pill);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
  font-weight: var(--fw-bold);
}

.asset-card--unavailable p {
  max-width: 440px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .asset-card-loading,
  .asset-card-overlay {
    grid-template-columns: 1fr;
  }

  .asset-card-loading__backdrop {
    display: none;
  }

  .asset-card-overlay__sheet {
    grid-column: 1;
    width: 100%;
    padding: var(--space-5);
  }

  .asset-card__heading,
  .asset-card__section {
    padding-inline: var(--space-6);
  }

  .asset-card__heading {
    flex-direction: column;
  }

  .asset-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--space-6);
  }

  .asset-card__future {
    grid-template-columns: 1fr;
    padding-inline: var(--space-6);
  }
}

.requests-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.requests-heading p {
  margin: var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

.toast--success {
  border-color: var(--status-approved-bd);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
}

.toast--error {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

/* HTMX error responses have no server-rendered slot to swap into, so app.js
   pins the message to the viewport bottom (above the mobile bottom nav). */
.toast--floating {
  position: fixed;
  z-index: 60;
  right: var(--space-6);
  bottom: calc(var(--safe-bottom) + var(--space-7));
  left: var(--space-6);
  max-width: 480px;
  margin-inline: auto;
  box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
  .toast--floating {
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--space-7));
  }
}

.request-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: var(--border-width) solid var(--border-default);
}

.request-tab {
  display: inline-flex;
  min-height: var(--control-h-lg);
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-6);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.request-tab span {
  display: inline-grid;
  min-width: var(--space-7);
  min-height: var(--space-7);
  place-items: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.request-tab--active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* --- Admin console forms ------------------------------------------------ */
.admin-form-card {
  flex-direction: column;
  align-items: stretch;
  margin-top: var(--space-6);
}

.admin-form-card__title {
  margin: var(--space-0) var(--space-0) var(--space-4);
}

.admin-form-card__title--compact {
  margin-bottom: var(--space-2);
}

.admin-form--offset {
  margin-top: var(--space-4);
}

.admin-form__field {
  display: block;
  margin-bottom: var(--space-4);
}

.admin-form__field--last,
.admin-form__fieldset--last {
  margin-bottom: var(--space-5);
}

.filter-card .admin-form__control {
  width: 100%;
}

.admin-form__fieldset {
  margin-bottom: var(--space-4);
}

.admin-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.admin-choice-list {
  display: grid;
  max-height: calc(
    var(--space-12) + var(--space-12) + var(--space-12) + var(--space-9)
  );
  gap: var(--space-2);
  padding: var(--space-3);
  overflow-y: auto;
}

.admin-choice {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
}

.admin-choice span {
  overflow-wrap: anywhere;
}

.filter-card .admin-choice__control {
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 var(--space-6);
  padding: var(--space-0);
  margin: var(--space-1) var(--space-0) var(--space-0);
  accent-color: var(--accent);
}

/* Access screen: one employee's categories and objects as a checkbox tree. */
.access-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.access-summary__name {
  margin: var(--space-0);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  color: var(--text-strong);
}

.access-summary__roles {
  margin: var(--space-1) var(--space-0) var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.access-summary__count {
  margin: var(--space-0);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--status-approved-bd);
  border-radius: var(--radius-pill);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
  font-size: var(--text-sm);
}

.access-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.access-section__actions {
  display: flex;
  gap: var(--space-3);
}

.access-section__hint {
  max-width: 70ch;
  margin: var(--space-0) var(--space-0) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.access-section__hint--warning {
  margin-top: var(--space-4);
  margin-bottom: var(--space-0);
  color: var(--status-pending-fg);
}

.access-tree,
.access-node__children {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.access-node__children {
  padding-left: var(--space-6);
  border-left: var(--border-width) solid var(--border-default);
  margin-left: var(--space-5);
}

/* Whole root groups stay together; two columns only where they fit. */
@media (min-width: 1100px) {
  .access-tree {
    columns: 2;
    column-gap: var(--space-9);
  }

  .access-tree > .access-node {
    break-inside: avoid;
  }
}

.access-node__label {
  display: flex;
  min-height: var(--control-h-md);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.access-node__label:hover {
  background: var(--surface-hover);
}

.access-node__control {
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 var(--space-6);
  margin: var(--space-0);
  accent-color: var(--accent);
}

.access-node__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.access-tree > .access-node > .access-node__label .access-node__name {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.access-node__tag {
  display: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--type-label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Unlike "успадковано", this one is not a state of the checkbox — it is a
   property of the category itself, so it shows whatever the box is doing. */
.access-node__tag--off {
  display: inline-block;
  border: var(--border-width) solid var(--status-pending-bd);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.access-node--inherited > .access-node__label {
  cursor: default;
}

.access-node--inherited > .access-node__label .access-node__name {
  color: var(--text-muted);
}

.access-node--inherited > .access-node__label .access-node__tag {
  display: inline-block;
}

.access-tree__empty {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.access-object-list {
  max-height: none;
  padding: var(--space-0);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.access-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.access-form__footer .access-section__hint {
  flex: 1 1 320px;
  margin: var(--space-0);
}

.alert--info {
  border-color: var(--status-issued-bd);
  background: var(--status-issued-bg);
  color: var(--status-issued-fg);
}

/* Редактор маршруту: рядок кроку згортається в колонку на вузькому екрані
   (перевірено на 400px, 2026-09-21) — три контроли поруч там не живуть. */
.admin-route-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.admin-route-step {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.admin-route-step__number {
  min-width: var(--space-7);
  padding-bottom: var(--space-2);
  font-weight: 600;
}

.admin-route-step__field {
  display: block;
  flex: 1 1 calc(var(--space-12) + var(--space-12) + var(--space-12));
  min-width: 0;
  /* ~416px: у селекті стоїть найдовша опція «Відповідальний за склад —
     активних носіїв: N», а `.filter-card select` ріже все до 200px. */
  max-width: calc(
    var(--space-12) + var(--space-12) + var(--space-12) + var(--space-12)
      + var(--space-12) + var(--space-12) + var(--space-9)
  );
}

.admin-route-step__caption {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.admin-route-step__modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 0;
  margin: var(--space-0);
  padding: var(--space-0);
}

.admin-route-step__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-card .admin-route-step__approver {
  width: 100%;
  max-width: none;
}

.admin-route-preview {
  margin: var(--space-4) var(--space-0);
}

/* Таблиця, ширша за екран телефона, лишається ДОСЯЖНОЮ: базовий
   `.table-card` має `overflow: hidden`, тож усе за межею просто зникало
   (список маршрутів на 400px — 765px таблиці). Модифікатор точковий, бо
   `.table-card` носять десятки екранів. */
.table-card--scroll-x {
  overflow-x: auto;
}

/* Умови маршруту (21.09): «Звідки»/«Куди» несуть назви локацій, а
   `.filter-card select` ріже селекти до 200px — назва об'єкта туди не
   влазить. Та сама межа, що й у «Хто погоджує». */
.filter-card .admin-route-place {
  width: 100%;
  max-width: none;
}

/* Шапка режиму «Нова версія»: умови ЛИШЕ читаються (вони рівня визначення).
   Пари «підпис — значення» в рядок на широкому, стовпчиком на 400px. */
.admin-route-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) var(--space-0);
}

.admin-route-conditions__item {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.admin-route-conditions__item dt {
  color: var(--text-muted);
}

.admin-route-conditions__item dd {
  margin: var(--space-0);
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-route-step__field {
    flex-basis: 100%;
  }

  .admin-route-step__controls {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .admin-route-conditions {
    flex-direction: column;
  }
}

.request-tab--active span {
  background: var(--accent-tint);
  color: var(--accent);
}

.request-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.request-list-loading {
  display: none;
  margin-top: var(--space-6);
}

.request-list-loading.htmx-request {
  display: grid;
  gap: var(--space-6);
}

.request-list-loading.htmx-request + .request-list {
  display: none;
}

.request-skeleton {
  min-height: 260px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.request-card {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.request-card__header,
.request-card__meta,
.request-card__summary,
.request-timeline,
.request-card__actions {
  margin-inline: var(--space-7);
}

.request-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
}

.request-card__header > div {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.request-card__number {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}

.request-card__kind {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.status-pill--draft {
  border-color: var(--status-draft-bd);
  background: var(--status-draft-bg);
  color: var(--status-draft-fg);
}

.status-pill--pending {
  border-color: var(--status-pending-bd);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.status-pill--approved,
.status-pill--done {
  border-color: var(--status-approved-bd);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
}

.status-pill--rejected {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

.status-pill--transit {
  border-color: var(--status-issued-bd);
  background: var(--status-issued-bg);
  color: var(--status-issued-fg);
}

.status-pill--discrepancy {
  border-color: var(--status-discrepancy-bd);
  background: var(--status-discrepancy-bg);
  color: var(--status-discrepancy-fg);
}

.request-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.request-card__meta strong {
  color: var(--text-body);
  font-weight: var(--fw-medium);
}

.request-card__summary {
  overflow: hidden;
  margin-top: var(--space-3);
  color: var(--text-faint);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Примітка автора (14.09): цілком, з переносами — це те, що людина
   написала руками, обрізати крапками не можна. */
.request-card__note {
  margin: var(--space-3) var(--space-7) var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.request-card__note span,
.approval-card__note span {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.request-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--space-7) var(--space-0);
  list-style: none;
}

.request-timeline__step {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-faint);
  text-align: center;
}

.request-timeline__step::before {
  position: absolute;
  z-index: 0;
  top: 13px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border-default);
  content: "";
}

.request-timeline__step:first-child::before {
  display: none;
}

.request-timeline__node {
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
}

.request-timeline__step strong {
  overflow: hidden;
  max-width: 100%;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-timeline__step small {
  min-height: var(--space-6);
  font-size: var(--text-2xs);
}

.request-timeline__step--complete::before,
.request-timeline__step--complete-final::before,
.request-timeline__step--current::before,
.request-timeline__step--rejected::before {
  background: var(--accent);
}

.request-timeline__step--complete .request-timeline__node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}

.request-timeline__step--complete,
.request-timeline__step--current {
  color: var(--accent);
}

.request-timeline__step--current .request-timeline__node {
  border-color: var(--accent);
  color: var(--accent);
  animation: motion-pulse var(--dur-pulse) var(--ease-standard) infinite;
}

.request-timeline__step[data-state="PENDING_APPROVAL"].request-timeline__step--current {
  color: var(--status-pending-fg);
}

.request-timeline__step[data-state="PENDING_APPROVAL"].request-timeline__step--current
  .request-timeline__node {
  border-color: var(--amber-500);
  color: var(--status-pending-fg);
}

.request-timeline__step--complete-final .request-timeline__node {
  border-color: var(--green-500);
  background: var(--green-500);
  color: var(--text-on-accent);
}

.request-timeline__step--complete-final {
  color: var(--green-600);
}

.request-timeline__step--rejected .request-timeline__node {
  border-color: var(--red-500);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

.request-timeline__step--rejected {
  color: var(--status-rejected-fg);
}

.request-timeline__step--cancelled .request-timeline__node {
  border-style: dashed;
}

/* Compact "крок N з M" phone variant of the timeline - hidden on desktop,
   shown instead of .request-timeline below 640px (see mobile media block). */
.request-timeline-compact {
  display: none;
}

.request-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-7);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-header);
}

.request-card__owner,
.request-card__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.avatar--small {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: var(--text-xs);
}

.request-card__owner {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.act-placeholder {
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.request-card__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.cancel-action {
  color: var(--status-rejected-fg);
  font-size: var(--text-xs);
}

.cancel-action summary {
  min-height: var(--control-h-md);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
}

.cancel-action form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.cancel-action__hint {
  width: 100%;
  margin: var(--space-0);
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.cancel-action label {
  display: flex;
  min-width: 280px;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-muted);
}

.cancel-action input {
  height: var(--control-h-md);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

/* Корекція КІЛЬКОСТЕЙ приймання (ПЛАН-R, R2): перелік рядків приймання
   всередині тієї самої форми «Корекція». Ширина 100% обов'язкова — без неї
   список став би ще одним гнучким елементом поруч із полем причини і на
   в'юпорті 1280 стиснувся б у колонку завширшки в одне слово. */
.cancel-action__quantities {
  width: 100%;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.cancel-action__quantities li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.cancel-action__quantities li:last-child {
  border-bottom: 0;
}

.request-list__empty,
.request-lines-card {
  padding: var(--space-9);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.request-list__empty {
  color: var(--text-muted);
  text-align: center;
}

.request-list__empty strong {
  color: var(--text-strong);
}

.request-list__empty p {
  margin-bottom: var(--space-0);
}

.back-link {
  color: var(--text-link);
  font-size: var(--text-sm);
  text-decoration: none;
}

.request-lines-card h2 {
  margin-top: var(--space-0);
  font-size: var(--text-md);
}

.request-lines-card ul {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.request-lines-card li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

/* The name takes the slack so the inventory number sits next to the quantity
   instead of floating in the middle of the row. */
.request-lines-card__name {
  flex: 1;
}

.request-lines-card__inv {
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.request-lines-card li:last-child {
  border-bottom: 0;
}

.alert {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: var(--border-width) solid;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.alert--error {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

.alert--warning {
  border-color: var(--status-pending-bd);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.approvals-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.approvals-toolbar__search {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.approvals-counter {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--status-pending-bd);
  border-radius: var(--radius-pill);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.approvals-empty {
  padding: var(--space-12) var(--space-8);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  text-align: center;
}

.approvals-empty__icon {
  display: inline-grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: var(--space-6);
  border: var(--border-width) solid var(--status-approved-bd);
  border-radius: var(--radius-pill);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
  font-size: var(--text-xl);
}

.approvals-empty strong {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-md);
}

.approvals-empty p {
  margin-top: var(--space-3);
  color: var(--text-faint);
  font-size: var(--text-sm);
}

.approval-card {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.approval-card__body {
  padding: var(--space-7) var(--space-7) var(--space-6);
}

.approval-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.approval-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.approval-card__number {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.approval-card__dot {
  color: var(--border-strong);
}

.approval-card__type {
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.approval-card__waiting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.approval-card__waiting--overdue {
  color: var(--red-500);
  font-weight: var(--fw-bold);
}

.approval-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.approval-card__meta strong {
  color: var(--text-body);
  font-weight: var(--fw-medium);
}

.approval-card__sep {
  color: var(--border-strong);
}

.approval-card__step {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.approval-card__step-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--status-issued-bd);
  border-radius: var(--radius-md);
  background: var(--status-issued-bg);
  color: var(--status-issued-fg);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.approval-card__rule {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.approval-card__shared {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.approval-card__shared > span:first-child {
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.approval-card__lines {
  border-top: var(--border-width) solid var(--border-subtle);
}

/* Приймання без кнопки (інцидент 22.09): лише перелік того, що в дорозі. */
.approval-card__lines--readonly {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.approval-card__note--blocked {
  margin-inline: var(--space-7);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* «Ви дієте як адміністратор за …» (22.09): кнопка є не за звичайним
   правилом, тож підпис має читатись як попередження, а не як підказка. */
.approval-card__note--override {
  margin-inline: var(--space-7);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.approval-card__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7) var(--space-2);
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.approval-card__group-header--inactive {
  color: var(--text-faint);
}

.approval-card__group-header em {
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-style: italic;
}

.approval-line {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-7);
  border-top: var(--border-width) solid var(--border-subtle);
}

.approval-line--inactive {
  background: var(--surface-sunken);
}

.approval-line--inactive .approval-line__name {
  color: var(--text-faint);
}

/* Shipping ship/receive cards still align their rows with this slot. */
.approval-line__checkbox-placeholder {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* --- Approval card: cross-out line UX --------------------------------- */
/* A line the viewer can decide gets a prominent ✕; a crossed line stays
   visible (struck through, «Знято») until the decision is posted. */
.approval-line__cross,
.approval-line__cross-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  flex: 0 0 var(--tap-target-min);
}

.approval-line__cross {
  border: var(--border-width) solid var(--status-rejected-bd);
  border-radius: var(--radius-md);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.approval-line__cross:hover {
  border-color: var(--status-rejected-fg);
}

.approval-line--removed {
  background: var(--status-rejected-bg);
}

.approval-line--removed .approval-line__name {
  color: var(--text-faint);
  text-decoration: line-through;
}

.approval-line__removed-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--status-rejected-bd);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--status-rejected-fg);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.approval-line__undo {
  min-height: var(--tap-target-min);
  padding-inline: var(--space-4);
  border: none;
  background: none;
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}

.approval-card__all-removed-hint {
  padding: var(--space-4) var(--space-7);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
  font-size: var(--text-xs);
}

.approval-line__name {
  flex: 1;
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

/* Owner decision 2026-07-21: the inventory number gets its own slot instead
   of being glued to the item name, so it can be scanned against the tag on
   the tool. Materials have none and the element is simply not rendered. */
.approval-line__inv {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.approval-line__qty {
  width: 70px;
  text-align: right;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.approval-line__unit {
  width: 48px;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.approval-card__partial-hint {
  padding: var(--space-4) var(--space-7);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--status-pending-bg);
  color: var(--amber-600);
  font-size: var(--text-xs);
}

.approval-card__note {
  margin: var(--space-4) var(--space-0) var(--space-0);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-header);
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.approval-card__actions {
  padding: var(--space-6) var(--space-7);
  border-top: var(--border-width) solid var(--border-subtle);
}

.approval-card__buttons {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.approval-card__details {
  margin-left: auto;
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.button--approve {
  border-color: var(--green-500);
  background: var(--green-500);
  color: var(--text-on-accent);
}

.button--approve:hover {
  border-color: var(--green-600);
  background: var(--green-600);
}

.button--approve:disabled {
  border-color: var(--border-default);
  background: var(--surface-disabled);
  color: var(--text-faint);
  cursor: not-allowed;
}

.button--return {
  border-color: var(--amber-100);
  background: var(--surface-card);
  color: var(--amber-600);
}

.button--return:hover {
  border-color: var(--amber-100);
  background: var(--amber-50);
  color: var(--amber-700);
}

.button--reject {
  border-color: var(--red-100);
  background: var(--surface-card);
  color: var(--red-500);
}

.button--reject:hover {
  border-color: var(--red-100);
  background: var(--red-50);
  color: var(--red-600);
}

.approval-card__comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.approval-card__comment-required {
  color: var(--amber-600);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
}

.approval-card__comment textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 74px;
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-strong);
  resize: vertical;
}

.approval-card__comment-actions {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.scope-note--warning {
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--status-pending-bd);
  border-radius: var(--radius-card);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-size: var(--text-xs);
}

.scope-note--warning span {
  border-color: var(--status-pending-fg);
  color: var(--status-pending-fg);
}

.shipping-qty-input {
  width: 84px;
  height: var(--control-h-md);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.approval-card__lines select {
  height: var(--control-h-md);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--text-xs);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-enter: 0ms;
    --dur-exit: 0ms;
    --dur-pulse: 0ms;
    --dur-skeleton: 0ms;
  }

  .skeleton,
  .motion-enter,
  .motion-exit,
  .motion-pulse {
    animation: none;
  }

  .cart-sheet,
  .cart-sheet--open,
  .bottom-nav__link,
  .icon-button,
  .nav-toggle,
  a,
  button {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-panel {
    position: static;
  }

  .filter-card {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .topbar__inner,
  .main-nav__inner,
  .workspace {
    padding-inline: var(--space-5);
  }

  .user-panel__text {
    display: none;
  }

  .nav-toggle {
    display: grid;
    margin-left: auto;
  }

  .main-nav {
    display: none;
  }

  .main-nav--open {
    display: block;
  }

  .main-nav__inner {
    flex-direction: column;
    gap: var(--space-0);
    padding-block: var(--space-4);
  }

  .main-nav__link {
    min-height: var(--control-h-lg);
    border-bottom: 0;
  }

  .title-line {
    display: block;
  }

  .title-line span {
    display: block;
    margin-top: var(--space-1);
  }

  /* :not(.visually-hidden) — інакше width:100% перебиває кліпнуті
     скрінрідерні підписи і сторінка отримує горизонтальну прокрутку */
  .filter-card > :not(.visually-hidden) {
    width: 100%;
    max-width: none;
  }

  .filter-card select {
    max-width: none;
  }

  .filter-card__count {
    justify-content: flex-end;
  }

  .requests-heading,
  .request-card__footer,
  .request-card__actions,
  .cancel-action form {
    align-items: stretch;
    flex-direction: column;
  }

  .requests-heading .button,
  .request-card__actions .button {
    width: 100%;
    min-height: var(--control-h-touch);
  }

  .request-card__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    white-space: normal;
  }

  /* Compact timeline: "крок N з M" text replaces the horizontal stepper on
     phones (§4.3 - picked the compact-text variant over horizontal scroll
     to avoid an extra scroll affordance inside an already-scrolling page). */
  .request-timeline {
    display: none;
  }

  .request-timeline-compact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline: var(--space-7);
    padding: var(--space-5) var(--space-0);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
  }

  .request-timeline-compact strong {
    color: var(--accent);
  }

  .request-card__links {
    align-items: flex-start;
    flex-direction: column;
  }

  .cancel-action label {
    min-width: 0;
  }

  .approvals-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .approvals-toolbar__search {
    flex-direction: column;
    align-items: stretch;
  }

  .approval-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .approval-card__buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .approval-card__buttons .button {
    width: 100%;
    min-height: var(--control-h-touch);
  }

  .approval-card__details {
    margin-left: 0;
  }

  .approval-card__meta {
    white-space: normal;
  }

  /* Narrow screens: the inventory number gets its own line. Sharing one row
     with the name squeezed the qty input off-screen. Scoped with :has so
     rows without a number keep their current single-line layout. */
  .approval-line:has(.approval-line__inv) {
    flex-wrap: wrap;
  }

  .approval-line__inv {
    flex-basis: 100%;
    padding-left: calc(18px + var(--space-6));
  }

  .approval-card__comment-actions .button {
    width: 100%;
    min-height: var(--control-h-touch);
  }

  .approval-card__comment-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Shipping ship/receive cards share .approval-card__actions markup. */
  .approval-card__actions .button {
    width: 100%;
    min-height: var(--control-h-touch);
  }

  /* --- Tabulator mobile mini-card row (§4.1) ---------------------------- */
  .stock-table .tabulator-row {
    min-height: var(--tap-target-min);
  }

  .stock-table .tabulator-row .tabulator-cell {
    padding: var(--space-3) var(--pad-cell-x);
  }

  .stock-table .tabulator-row .tabulator-cell[tabulator-field="selected"] {
    min-width: var(--tap-target-min);
  }

  .stock-table .tabulator-row .tabulator-responsive-collapse-toggle {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
  }

  .stock-table .tabulator-responsive-collapse {
    padding: var(--space-4) var(--pad-cell-x);
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--surface-header);
  }

  .stock-table .tabulator-responsive-collapse table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .cart-toggle-form input[type="checkbox"] {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
  }

  /* --- Bottom navigation (§4.4) ----------------------------------------- */
  .app-shell {
    padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  }

  .bottom-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: calc(var(--bottomnav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: var(--border-width) solid var(--border-default);
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
  }

  .bottom-nav__link {
    display: flex;
    min-width: var(--tap-target-min);
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    color: var(--text-faint);
    font-size: var(--text-2xs);
    text-decoration: none;
  }

  .bottom-nav__link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }

  .bottom-nav__link--active {
    color: var(--accent);
  }

  /* Burger stays as fallback per §4.4, but bottom nav takes over the
     primary role below 640px. */
  .nav-toggle,
  .main-nav {
    display: none;
  }
}

/* --- Cart bottom sheet (§4.2) --------------------------------------------
   The SAME cart_panel.html partial renders once. .cart-sheet is its wrapper:
   on desktop it's just the sticky right column shell (unchanged look, no
   fixed positioning); on phones the very same node is re-styled into a
   fixed bottom sheet toggled by the .cart-sheet--open modifier, revealed
   from a collapsed .cart-bar. Exactly one #cart-panel node exists, so the
   HTMX hx-target="#cart-panel" outerHTML swap keeps resolving either way. */
.cart-sheet__handle,
.cart-bar,
.cart-sheet__backdrop {
  display: none;
}

@media (max-width: 640px) {
  .workspace {
    padding-bottom: calc(var(--bottombar-h) + var(--safe-bottom) + var(--space-7));
  }

  .cart-bar {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
    left: 0;
    display: flex;
    min-height: var(--bottombar-h);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    border-top: var(--border-width) solid var(--border-default);
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
  }

  .cart-bar__count {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
  }

  .cart-bar__open {
    min-height: var(--control-h-touch);
    padding-inline: var(--space-6);
  }

  .cart-sheet {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 85vh;
    overflow-y: auto;
    visibility: hidden;
    border-top: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
    transform: translateY(100%);
    transition: transform var(--dur-enter) var(--ease-out), visibility 0s linear var(--dur-enter);
  }

  .cart-sheet--open {
    visibility: visible;
    transform: translateY(0);
    transition: transform var(--dur-enter) var(--ease-out);
  }

  .cart-sheet .cart-panel {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cart-sheet__backdrop {
    position: fixed;
    z-index: 35;
    display: block;
    inset: 0;
    background: var(--overlay-scrim, rgb(0 0 0 / 40%));
  }

  .cart-sheet__handle {
    display: flex;
    justify-content: center;
    padding: var(--space-3) var(--space-0);
  }

  .cart-sheet__handle span {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }

  .cart-sheet__close {
    min-height: var(--control-h-touch);
    min-width: var(--control-h-touch);
  }
}

@media (min-width: 640.02px) {
  .cart-bar,
  .bottom-nav {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Інвентаризація (stock-taking) — mobile-first conduct screen         */
/* ------------------------------------------------------------------ */

.inv-create,
.inv-history {
  background: var(--surface-card);
  border: 1px solid var(--border-soft, var(--status-draft-bd));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.inv-create h2,
.inv-history h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.inv-create p {
  margin: 0 0 12px;
  color: var(--text-muted);
}

.inv-create__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* «Що рахуємо» — радіо-картки на всю ширину форми; ціль тапу ≥ 44px,
   бо форму відкривають і з телефона на складі. */
.inv-scope {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.inv-scope__legend {
  padding: 0;
  margin-bottom: 4px;
  font-weight: 600;
}

.inv-scope__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft, var(--status-draft-bd));
  border-radius: 10px;
  cursor: pointer;
}

.inv-scope__option:has(input:checked) {
  border-color: var(--gt-orange);
  background: var(--status-draft-bg);
}

.inv-scope__option input {
  margin: 0;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.inv-scope__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-scope__text small {
  color: var(--text-muted);
}

.inv-create__where {
  flex: 1 1 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.inv-create__where select {
  flex: 1 1 240px;
  min-height: 44px;
}

.inv-scope-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82em;
  border: 1px solid var(--gt-orange);
  color: var(--gt-orange);
}

.inv-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.inv-card {
  display: block;
  border: 1px solid var(--status-draft-bd);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}

.inv-card--open {
  border-color: var(--accent);
}

.inv-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.inv-card__body,
.inv-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.92em;
}

.inv-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82em;
  border: 1px solid var(--status-draft-bd);
  background: var(--status-draft-bg);
  color: var(--status-draft-fg);
}

.inv-badge--in_progress {
  background: var(--status-pending-bg);
  border-color: var(--status-pending-bd);
  color: var(--status-pending-fg);
}

.inv-badge--completed {
  background: var(--status-approved-bg);
  border-color: var(--status-approved-bd);
  color: var(--status-approved-fg);
}

.inv-badge--cancelled {
  background: var(--status-rejected-bg);
  border-color: var(--status-rejected-bd);
  color: var(--status-rejected-fg);
}

.inv-skipped {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--status-pending-bd);
  border-radius: 8px;
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-weight: 600;
}

.inv-flag {
  color: var(--status-discrepancy-fg);
  font-weight: 600;
}

.inv-empty {
  color: var(--text-muted);
}

.inv-head {
  background: var(--surface-card);
  border: 1px solid var(--status-draft-bd);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.inv-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.inv-head__meta {
  color: var(--text-muted);
  font-size: 0.92em;
}

.inv-head__back {
  margin-left: auto;
}

.inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.inv-progress__bar {
  height: 10px;
  border-radius: 999px;
  background: var(--status-draft-bg);
  overflow: hidden;
}

.inv-progress__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.inv-progress__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 0.95em;
}

.inv-stat--present { color: var(--status-approved-fg); }
.inv-stat--missing { color: var(--status-rejected-fg); }
.inv-stat--found { color: var(--status-pending-fg); }
.inv-stat--flag { color: var(--status-discrepancy-fg); font-weight: 600; }

.inv-filters select {
  min-height: 44px;
}

.inv-lines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.inv-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  background: var(--surface-card);
  border: 1px solid var(--status-draft-bd);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 14px;
}

.inv-line--present { border-left-color: var(--status-approved-fg); }
.inv-line--missing { border-left-color: var(--status-rejected-fg); }
.inv-line--found { border-left-color: var(--status-pending-fg); }

.inv-line__info {
  flex: 1 1 260px;
  display: grid;
  gap: 2px;
}

.inv-line__meta {
  color: var(--text-muted);
  font-size: 0.9em;
}

.inv-line__note {
  font-size: 0.9em;
}

.inv-line__moved {
  color: var(--status-discrepancy-fg);
  font-size: 0.9em;
  font-weight: 600;
}

.inv-line__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.inv-line__state {
  color: var(--text-muted);
  font-size: 0.92em;
}

.inv-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inv-line__qty input {
  width: 90px;
  min-height: 44px;
  padding: 4px 8px;
}

.inv-btn {
  min-height: 48px;
  min-width: 72px;
  border-radius: 10px;
  border: 1px solid var(--status-draft-bd);
  background: var(--surface-card);
  font-weight: 600;
}

/* Вимкнена дія має ВИГЛЯДАТИ вимкненою. Досі .inv-btn мала лише
   cursor: not-allowed від глобального button:disabled — тобто «Це воно» до
   відправлення здачі виглядала точно як робоча кнопка (той самий зелений
   фон, opacity 1). Зразок — .button--approve:disabled; текст беремо
   --text-muted, а не --text-faint (борг WCAG, docs/design/README.md). */
.inv-btn:disabled {
  border-color: var(--border-default);
  background: var(--surface-disabled);
  color: var(--text-muted);
}

.inv-btn--yes {
  background: var(--status-approved-bg);
  border-color: var(--status-approved-bd);
  color: var(--status-approved-fg);
}

.inv-btn--no {
  background: var(--status-rejected-bg);
  border-color: var(--status-rejected-bd);
  color: var(--status-rejected-fg);
}

.inv-btn--current {
  box-shadow: var(--shadow-focus);
}

.inv-btn--ghost {
  min-width: auto;
  color: var(--text-muted);
  background: transparent;
}

.inv-found {
  background: var(--surface-card);
  border: 1px solid var(--status-draft-bd);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
}

.inv-found summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}

.inv-found p {
  color: var(--text-muted);
  margin: 8px 0;
}

.inv-found__form {
  display: grid;
  gap: 8px;
  max-width: 460px;
}

.inv-found__form input,
.inv-found__form select {
  min-height: 44px;
  padding: 6px 10px;
}

@media (max-width: 640px) {
  .inv-line__actions {
    margin-left: 0;
    width: 100%;
  }

  .inv-btn {
    flex: 1 1 auto;
  }

  .inv-head__back {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------- */
/* Прийом з об'єктів (intake) — reuses the inv-* family; only the extra  */
/* batch/match badge states and the upload form live here.               */
/* --------------------------------------------------------------------- */

.inv-badge--matched,
.inv-badge--posted {
  background: var(--status-pending-bg);
  border-color: var(--status-pending-bd);
  color: var(--status-pending-fg);
}

.inv-badge--transfer_created {
  background: var(--status-transit-bg, var(--status-pending-bg));
  border-color: var(--status-transit-bd, var(--status-pending-bd));
  color: var(--status-transit-fg, var(--status-pending-fg));
}

.inv-badge--ambiguous {
  background: var(--status-discrepancy-bg, var(--status-rejected-bg));
  border-color: var(--status-discrepancy-bd, var(--status-rejected-bd));
  color: var(--status-discrepancy-fg, var(--status-rejected-fg));
}

.inv-badge--new {
  background: var(--status-approved-bg);
  border-color: var(--status-approved-bd);
  color: var(--status-approved-fg);
}

.intake-upload {
  flex-wrap: wrap;
}

.intake-upload input[type="file"] {
  max-width: 100%;
}

.intake-decide select {
  max-width: 340px;
}

/* --------------------------------------------------------------------- */
/* Full-width виняток для екранів-таблиць (фікс 2026-09-01: реєстр із    */
/* 12 колонками впирався в --container-max 1480px — на 1920px колонка   */
/* «МВО» різалась, праворуч лишалось пів екрана порожнечі). Модифікатор  */
/* вішається ТІЛЬКИ на екрани, які цього просять; решта лишається на    */
/* центрованому cap-і.                                                   */
/*                                                                       */
/* 09.09: власник попросив те саме для реєстрів МАТЕРІАЛІВ і МАЛОЦІНКИ   */
/* («поля завеликі, зроби адаптивно, як на основних засобах»). Виміряно  */
/* на 1840 px: активи 1776 px (є модифікатор), матеріали 1480 px і поля  */
/* 212/148 px (не було). Тобто носіїв модифікатора тепер ТРИ, і всі три  */
/* — широкі таблиці-реєстри; беремо наявний механізм, а не другий свій.  */
/* Тримає tests/test_registry_ui_pins.py                                 */
/* ::test_the_wide_table_registries_are_not_capped_at_container_max      */
/* --------------------------------------------------------------------- */

.workspace--full {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Рішення погоджувача на картці заявки (банер причини + зняті рядки)  */
/* ------------------------------------------------------------------ */

.rq-feedback {
  border: 1px solid var(--status-pending-bd);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  padding: 12px 16px;
  margin: 10px 0 14px;
  display: grid;
  gap: 4px;
}

/* «Це ще чернетка» (інцидент 22.09) — помітніше за саму картку заявки:
   людина мусить побачити це раніше, ніж вирішить, що заявку подано. */
.rq-draft-banner {
  border: 1px solid var(--status-pending-bd);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  padding: 12px 16px;
  margin: 10px 0 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.rq-draft-banner__title {
  font-size: 1.08em;
}

.rq-draft-banner__text {
  margin: 0;
}

.rq-feedback--rejected {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

.rq-feedback__title {
  font-size: 1.02em;
}

.rq-feedback__comment {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rq-feedback__meta {
  font-size: 0.9em;
  opacity: 0.85;
}

.request-lines-card__line--rejected .request-lines-card__name {
  text-decoration: line-through;
  opacity: 0.7;
}

.rq-line-rejected {
  display: block;
  width: 100%;
  color: var(--status-rejected-fg);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Міні-таймлайн маршруту на картці погодження */
.approval-route {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--status-draft-bd);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  font-size: 0.92em;
}

.approval-route__step {
  display: grid;
  gap: 2px;
}

.approval-route__step--done .approval-route__label {
  color: var(--status-approved-fg);
}

.approval-route__step--current .approval-route__label {
  font-weight: 700;
}

.approval-route__step--upcoming {
  color: var(--text-muted);
}

.approval-route__label em {
  font-style: normal;
  font-weight: 600;
}

.approval-route__decision {
  padding-left: 18px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.approval-route__decision q {
  color: var(--text-body);
}

/* === Режими складу: пігулка, чипи джерела, стан, степпер (МАТ 02.09) === */

/* Тумблер ОЗ/Матеріали/Малоцінка — «темна пігулка» (дизайн A з канви,
   рішення власника 02.09). Кольори — наявні токени: --gt-ink і --gt-orange
   із shell.css (фірмовий будівельний акцент; виняток із синього акценту
   задокументовано в DS-README). */
.stock-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 999px;
  background: var(--gt-ink);
  box-shadow: 0 6px 18px rgb(17 19 21 / 0.25);
  max-width: 100%;
  overflow-x: auto;
}

.stock-mode-pill__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d5d7d9;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.stock-mode-pill__tab--active {
  background: var(--gt-orange);
  color: #fff;
}

.stock-mode-pill__count {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  font-size: 12px;
  font-weight: 700;
}

.stock-mode-pill__tab--active .stock-mode-pill__count {
  background: rgb(255 255 255 / 0.25);
}

/* МВО і Стан мають сенс лише для ОЗ — сервер їх ігнорує поза assets,
   а форма ховає (data-mode ставить сервер і синхронізує клік по табу). */
#stock-filters:not([data-mode="assets"]) #holder-filter,
#stock-filters:not([data-mode="assets"]) #condition-filter {
  display: none;
}

/* Чип «Джерело»: склад зелений, об'єкт синій — токени статусів/акценту. */
.stock-chip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 10px;
  border-radius: 999px;
  border: var(--border-width) solid var(--status-approved-bd);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
  font-size: 13px;
  font-weight: 600;
}

.stock-chip--object {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-700);
}

/* Колонка «Стан» ОЗ-режиму: кольоровий текст без плашки. */
.stock-status--ok { color: var(--status-approved-fg); font-weight: 600; }
.stock-status--danger { color: var(--status-rejected-fg); font-weight: 600; }
.stock-status--muted { color: var(--text-muted); }

.stock-inv-no {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Степпер «Замовити» матеріальних режимів: − [кількість] +. */
.stock-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stock-stepper__btn {
  width: 28px;
  height: 28px;
  border: var(--border-width) solid var(--border-strong, #c8ccd2);
  border-radius: 8px;
  background: var(--surface-card, #fff);
  color: var(--text-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.stock-stepper__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.stock-stepper__value {
  width: 56px;
  padding: 4px 2px;
  border: var(--border-width) solid var(--border-strong, #c8ccd2);
  border-radius: 8px;
  text-align: center;
  font: inherit;
}

.stock-stepper--active .stock-stepper__value {
  border-color: var(--accent);
  font-weight: 700;
}

.stock-stepper__unit {
  color: var(--text-muted);
  font-size: 12px;
}

.stock-stepper__form {
  display: none;
}

/* Пальцевий мінімум 44px на вузьких екранах (умова критика, перевірка 375). */
@media (max-width: 639px) {
  .stock-stepper__btn {
    width: 44px;
    height: 44px;
  }

  .stock-stepper__value {
    height: 44px;
  }
}

/* Заголовок групи джерела в кошику (наскрізний кошик, канва 02.09). */
.cart-panel__group-header {
  margin: 10px 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Підзаголовок групи: матеріально відповідальна особа (власник, 22.09).
   Пара «джерело + МВО» = одна майбутня заявка, тож підзаголовок стоїть
   під назвою джерела і слабший за нього — це уточнення, а не новий розділ.
   Регістр не міняємо: тут прізвище людини. */
.cart-panel__group-holder {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* Ручне введення понад доступний залишок: м'який cap — попереджаємо, не
   блокуємо (сервер перевірить при створенні заявки). */
.stock-stepper__value.stock-qty-input--warning {
  border-color: var(--red-500);
  color: var(--red-500);
}

/* П2: мультивибір у спискових фільтрах реєстрів (кнопка в заголовку + попап). */
/* «Скинути фільтри» ховається атрибутом hidden — клас .button задає display
   і без цього правила перебиває [hidden] (знайдено живим прев'ю). */
.filter-card .button[hidden] {
  display: none;
}

.stock-table .tabulator-header-filter .mfilter__button {
  width: 100%;
  min-height: var(--space-9);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-control, 6px);
  background: var(--surface-card);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-2xs);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.stock-table .tabulator-header-filter .mfilter__button--active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.mfilter {
  position: absolute;
  z-index: 80; /* вище за .rail-panel (70) */
  display: flex;
  flex-direction: column;
  max-height: min(60vh, 420px);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
  font-size: var(--text-xs);
}

.mfilter__tools {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.mfilter__search {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-control, 6px);
  background: var(--surface-sunken);
  color: inherit;
  font: inherit;
}

.mfilter__tool {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control, 6px);
  background: var(--surface-sunken);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.mfilter__list {
  overflow-y: auto;
}

.mfilter__row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-control, 6px);
  cursor: pointer;
}

.mfilter__row:hover {
  background: var(--surface-hover);
}

.mfilter__row span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mfilter__count,
.mfilter__empty {
  color: var(--text-muted);
}

/* П4: обране значення, яке за іншими фільтрами дає 0 рядків, лишається
   видимим із «0» — не зникає мовчки. */
.mfilter__row--zero {
  color: var(--text-muted);
}

.mfilter__row--zero .mfilter__count {
  color: var(--status-rejected-fg);
  font-weight: var(--fw-semibold);
}

/* П3: попап діапазону дат «від–до». */
.mfilter--range .mfilter__field {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}

.mfilter--range .mfilter__field > span {
  width: 2.5em;
  color: var(--text-muted);
}

.mfilter__date {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-control, 6px);
  background: var(--surface-sunken);
  color: inherit;
  font: inherit;
}

.mfilter__date[aria-invalid="true"] {
  border-color: var(--status-rejected-fg);
}

.mfilter--range .mfilter__tools {
  justify-content: flex-end;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .mfilter {
    max-height: 70vh;
  }
}

/* Notifications page ------------------------------------------------------ */
.notification-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.notification-list-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.notification-list__group-title {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notification-list__empty {
  padding: var(--space-9);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  color: var(--text-muted);
  text-align: center;
}

.notification-list__empty strong {
  color: var(--text-strong);
}

.notification-list__empty p {
  margin-bottom: 0;
}

.notification-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
}

.notification-row:hover {
  background: var(--surface-hover);
}

.notification-row__marker {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

/* Unread is marked THREE ways, never by color alone (WCAG 1.4.1): a filled
   dot, bold title text, and the visually-hidden "Непрочитане." label read by
   screen readers — matching the topbar bell's fix after its own a11y pass
   (docs/design/pm-topbar-bell.md). */
.notification-row--unread .notification-row__marker {
  background: var(--text-link);
}

.notification-row--unread .notification-row__title {
  font-weight: var(--fw-semibold);
}

.notification-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.notification-row__title {
  color: var(--text-strong);
  font-size: var(--text-sm);
}

.notification-row__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.notification-row__time {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Картка обладнання: секція з олівцем + єдиний таймлайн (ДИЗАЙН, П5)  */
/* Макет затверджено власником 05.09 (ДИЗАЙН-3).                       */
/* Розмітку секцій веде чат КАРТКИ (card_section_read/form.html) —     */
/* тут ЛИШЕ стилі до його класів; оболонка і таймлайн — ДИЗАЙН.        */
/* ------------------------------------------------------------------ */

.card-section {
  padding: var(--pad-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

/* Редагована секція візуально піднімається — видно, де ти зараз. */
.card-section--editing {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
}

/* Бурштин, не червоний: конфлікт не є помилкою людини — двоє в одній картці. */
.card-section--conflict {
  border-color: var(--status-pending-bd);
  box-shadow: var(--shadow-md);
}

.card-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}

.card-section__title {
  margin: var(--space-0);
  color: var(--text-strong);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
}

/* 44px, а не 36 як .icon-button: це основна дія секції і ціль для пальця. */
.card-section__pencil {
  display: grid;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  flex: 0 0 var(--tap-target-min);
  place-items: center;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-muted);
  transition: var(--transition-control);
}

.card-section__pencil:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}

.card-section__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-stack);
  margin: var(--space-0);
}

.card-section__row {
  min-width: 0;
}

.card-section__label {
  color: var(--text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.card-section__value {
  margin: var(--space-1) var(--space-0) var(--space-0);
  color: var(--text-body);
  font-size: var(--type-body-size);
  line-height: var(--lh-normal);
}

/* Картка позиції (ПЛАН-КФ, 04.10): пояснення під значенням або полем —
   «одиницю змінити не можна…», «порожнє поле не стирає ціну», підписи
   «ціна × фізично» у шапці. Дрібно і приглушено: це підказка, не дані. */
.card-section__help {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--type-label-size);
  line-height: var(--lh-normal);
}

.card-section__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-body);
  font-size: var(--type-body-size);
}

.asset-timeline__more {
  margin: var(--space-5) var(--space-0) var(--space-0);
}

.card-section__form {
  display: grid;
  gap: var(--gap-stack);
}

.card-section__field {
  display: grid;
  gap: var(--space-2);
}

.card-section__input {
  min-height: var(--control-h-lg);
  padding: var(--space-3) var(--pad-control-x);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--type-body-size);
  line-height: var(--lh-normal);
}

/* Незбережений текст третього стану читається як ТЕКСТ, а не як поле:
   він readonly, і людина не має пробувати в ньому правити. */
.card-section__unsaved {
  min-height: var(--control-h-lg);
  padding: var(--space-3) var(--pad-control-x);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--type-body-size);
  line-height: var(--lh-normal);
  cursor: default;
  resize: none;
}

.card-section__actions {
  display: flex;
  gap: var(--gap-inline);
}

.card-section__conflict {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--gap-stack);
  border: var(--border-width) solid var(--status-pending-bd);
  border-radius: var(--radius-card);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.card-section__conflict-title {
  margin: var(--space-0);
  font-size: var(--type-body-size);
  font-weight: var(--fw-semibold);
}

.card-section__conflict-note {
  margin: var(--space-2) var(--space-0) var(--space-0);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

/* --- Єдиний таймлайн: рухи, інвентаризації, правки, погодження, фото --- */

.asset-timeline {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.asset-timeline__head {
  padding: var(--pad-card) var(--pad-card) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.asset-timeline__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.asset-timeline__chip {
  display: inline-flex;
  min-height: var(--control-h-sm);
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.asset-timeline__chip--on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text-link);
  font-weight: var(--fw-semibold);
}

.asset-timeline__event {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) var(--pad-card);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.asset-timeline__event:last-child {
  border-bottom: 0;
}

.asset-timeline__rail {
  display: flex;
  flex: 0 0 30px;
  flex-direction: column;
  align-items: center;
}

.asset-timeline__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

/* Конектор тягнеться між подіями; під ОСТАННЬОЮ його немає. */
.asset-timeline__line {
  width: 1px;
  flex: 1 1 auto;
  margin-top: var(--space-2);
  background: var(--border-subtle);
}

.asset-timeline__event:last-child .asset-timeline__line {
  background: transparent;
}

.asset-timeline__icon--movement,
.asset-timeline__icon--legacy_movement {
  border-color: var(--info-100);
  background: var(--info-50);
  color: var(--info-700);
}

.asset-timeline__icon--inventory,
.asset-timeline__icon--legacy_inventory {
  border-color: var(--green-100);
  background: var(--green-50);
  color: var(--green-700);
}

.asset-timeline__icon--change {
  border-color: var(--border-default);
  background: var(--surface-sunken);
  color: var(--gray-600);
}

.asset-timeline__icon--approval {
  border-color: var(--amber-100);
  background: var(--amber-50);
  color: var(--amber-700);
}

.asset-timeline__body {
  min-width: 0;
  flex: 1 1 auto;
}

.asset-timeline__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline);
}

.asset-timeline__title {
  color: var(--text-body);
  font-size: var(--type-body-size);
  font-weight: var(--fw-semibold);
}

.asset-timeline__when {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Недатоване зі старого обліку: дат не вигадуємо, тож підпис словом. */
.asset-timeline__when--undated {
  font-style: italic;
}

.asset-timeline__text {
  margin: var(--space-2) var(--space-0) var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}


/* --- Оболонка сторінки картки: фото зліва вгорі + дві колонки --- */

.asset-hero {
  display: flex;
  gap: var(--space-7);
  padding: var(--space-7);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.asset-hero__photo {
  display: grid;
  width: 180px;
  height: 180px;
  flex: 0 0 180px;
  place-items: center;
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.asset-hero__body {
  min-width: 0;
  flex: 1 1 auto;
}

.asset-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* Факт, значення якого — склейка кількох джерел («Інф за 2026: є ·
   Інвентаризація …: на місці»). У колонці 190px він розсипається на п'ять
   рядків і стоїть сиротою в другому ряду; на всю ширину читається як один
   рядок. */
.asset-hero__fact--wide {
  grid-column: 1 / -1;
}

.asset-hero__fact {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-header);
}

.asset-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  align-items: start;
  gap: var(--gap-section);
}

.asset-card-grid__sections {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--gap-stack);
}

@media (max-width: 1100px) {
  .asset-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .asset-hero {
    flex-direction: column;
  }

  .asset-hero__photo {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
  }

  .asset-hero__facts,
  .card-section__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Готово до вставки в apps/web/static/web/css/app.css ──
   Панель масових дій. Спека docs/design/pm-object-registry.md §3, §9.
   Нових ТОКЕНІВ не вводжу (червона лінія бренд-брифа) — лише нові класи,
   зібрані з наявних.

   Чому це НЕ .cart-bar: той компонент за замовчуванням display:none, його
   геометрія існує лише в @media (max-width: 640px), а на 640.02px і вище він
   глушиться display:none !important. Тобто на десктопі .cart-bar фізично
   немає, і перевикористати його неможливо — потрібні ДВА компоненти. */

.bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--bottombar-h);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  /* Тінь УГОРУ: панель прилипає знизу, тож вона має відділятися від таблиці
     над собою, а не від порожнечі під нею. */
  box-shadow: 0 -2px 8px rgb(0 0 0 / 8%);
}

.bulk-bar[hidden] {
  display: none;
}

.bulk-bar__count {
  font-weight: var(--fw-semibold);
  /* --text-muted, а не --text-faint: останній дає 2.61:1 на білому і
     провалює AA (спека §9). Системний борг застосунку не тиражуємо. */
  color: var(--text-muted);
}

.bulk-bar__actions {
  display: flex;
  gap: var(--space-2);
  /* Дії — праворуч, «Використано» крайня права: на телефоні це зона великого
     пальця, на десктопі — очікуване місце основної дії. */
  margin-left: auto;
}

.bulk-check-cell {
  /* Тап-ціль 44px (вимога брифа хвилі; це WCAG 2.5.5 рівня AAA, на AA такого
     мінімуму немає — у тестах на AA не посилатися). */
  min-height: var(--control-h-lg);
}

.bulk-check {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.bulk-check:disabled {
  cursor: not-allowed;
}

/* Рядок, де дія недоступна, ПОКАЗУЄТЬСЯ сірим, а не ховається (спека §4):
   гард має бути видно ДО дії, інакше людина обере рядок і отримає помилку. */
.stock-row--blocked {
  background: var(--surface-disabled);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .bulk-bar {
    /* Мобільний варіант бере в кошика лише ГЕОМЕТРІЮ, не клас: .cart-bar і
       .cart-sheet — обгортка ЄДИНОГО #cart-panel під hx-target (коментар в
       app.css), перевикористання зламало б htmx-своп кошика. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
    min-height: var(--bottombar-h);
    /* На вузькому екрані лічильник і «Скасувати вибір» переносяться, а дії
       лишаються в один ряд під великим пальцем. */
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .bulk-bar__actions {
    width: 100%;
    margin-left: 0;
  }

  .bulk-bar__actions .button {
    flex: 1 1 0;
  }
}

/* ------------------------------------------------------------------ */
/* Здача на склад файлом: прев'ю долі рядків і черга комірника         */
/* Перенесено з scoped-стилів ІНТЕЙКУ-2 (d401837) — вони свідомо не    */
/* лізли в гарячий файл. Розмітка й імена класів їхні, значення тут    */
/* переведені на токени: в оригіналі було 10+ кольорів повз палітру.   */
/* ------------------------------------------------------------------ */

.intake-preview__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  padding: var(--space-0);
  margin: var(--space-0) var(--space-0) var(--gap-stack);
  list-style: none;
}

.intake-preview__summary li {
  color: var(--gray-600);
  font-size: var(--text-sm);
}

.intake-preview__summary strong {
  margin-right: var(--space-2);
  color: var(--text-strong);
  font-size: var(--text-xl);
}

.intake-preview__table {
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.intake-preview__head,
.intake-preview__row {
  display: grid;
  grid-template-columns: 128px 92px minmax(0, 1fr) 190px minmax(0, 1.3fr);
  align-items: center;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.intake-preview__head {
  border-bottom-width: 2px;
  background: var(--surface-header);
  color: var(--gray-600);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.intake-preview__head > div,
.intake-preview__row > div {
  padding: var(--pad-cell-y) var(--pad-cell-x);
  font-size: var(--text-sm);
}

/* Підрядок малоцінки з кількома номерами: з одного рядка файла виходить
   K одиниць + хвіст, і це має бути видно відступом, а не здогадом. */
.intake-preview__row--sub {
  background: var(--surface-header);
}

.intake-preview__row--sub > div:first-child {
  padding-left: var(--space-9);
}

.intake-preview__row--stop {
  background: var(--red-50);
}

.intake-preview__row--to_keeper {
  background: var(--amber-50);
}

.intake-preview__row--skipped {
  color: var(--text-muted);
}

/* Пігулки долей. Ключі = константи FATE_* у apps/intake/services.py:189-199
   (їх ОДИНАДЦЯТЬ: девʼять у v3 плюс дві зі старого процесу). */
.inv-badge--fate-transfer,
.inv-badge--fate-transfer_corrected {
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
}

.inv-badge--fate-add_to_existing {
  background: var(--info-50);
  color: var(--info-700);
}

/* NEW_CARD — доля СТАРОГО процесу (INTAKE_V2=off), у v3 стає TO_KEEPER.
   Колір нейтральний, як в решти «нових»: у затвердженому макеті її немає,
   але старий екран до вмикання прапорця не має бути голим. */
.inv-badge--fate-new_material,
.inv-badge--fate-new_unit,
.inv-badge--fate-new_card {
  background: var(--surface-sunken);
  color: var(--gray-700);
}

.inv-badge--fate-to_keeper {
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.inv-badge--fate-stop {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

.inv-badge--fate-skipped {
  background: var(--gray-200);
  color: var(--gray-600);
}

/* DECISION — теж старий процес; PENDING — технічна доля «звірку не
   запускали», у штатному потоці людина її не бачить. */
.inv-badge--fate-decision,
.inv-badge--fate-pending {
  background: var(--status-discrepancy-bg);
  color: var(--status-discrepancy-fg);
}

.intake-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--space-6);
}

/* Черга комірника */

.intake-queue__item {
  flex-wrap: wrap;
}

.intake-queue__reason {
  color: var(--status-pending-fg);
  font-weight: var(--fw-semibold);
}

.intake-queue__return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
}

.intake-queue__return input {
  min-width: 220px;
  min-height: var(--tap-target-min);
  flex: 1 1 220px;
}


/* Телефон: таблиця стає картками. Зріз 640, а не 720 — канонічні зрізи
   проєкту 640 · 1100 · 1480 (tokens/spacing.css); четвертий існував би
   лише тут. */
@media (max-width: 640px) {
  .intake-preview__head {
    display: none;
  }

  .intake-preview__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--pad-cell-y) var(--space-0);
  }

  .intake-preview__row > div {
    padding: var(--space-1) var(--pad-cell-x);
  }

  /* Аркуш на картці не потрібен — він однаковий для сусідніх рядків. */
  .intake-preview__row > div:nth-child(2) {
    display: none;
  }

  .intake-preview__row > div:first-child {
    color: var(--text-muted);
    font-size: var(--text-2xs);
  }

  .intake-preview__row > div:nth-child(3) {
    font-weight: var(--fw-semibold);
  }
}

/* Черга комірника — «схожі картки» і «створити нову позицію» (ІНТЕЙК-2,
   ПЛАН-4: три дії в одному рядку черги). Обидва блоки живуть усередині
   .inv-line, тому важить не тільки вигляд, а й ЧЕРГОВІСТЬ: спершу впізнати
   («Це воно»), потім повернути менеджеру, і лише як остання можливість —
   завести нову картку. */

.intake-queue__candidates {
  list-style: none;
  margin: var(--space-2) var(--space-0) var(--space-0);
  padding: var(--space-0);
  display: grid;
  gap: var(--space-2);
}

.intake-queue__candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  font-size: 0.9em;
}

/* Форма створення — окремим рядом на всю ширину картки, а не поруч із
   «Повернути менеджеру». Три поля і кнопка в один ряд із кнопкою повернення
   дали б два конкурентні набори дій в одному візуальному рядку, і головна
   дія («Це воно») загубилася б між ними. Тонка лінія зверху читається як
   «а якщо нічого з наведеного не підійшло». */
.intake-queue__create {
  flex: 1 0 100%;
  margin-left: var(--space-0);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}

.intake-queue__create input {
  min-height: var(--tap-target-min);
  flex: 1 1 180px;
  min-width: 140px;
}

/* Телефон: поля в стовпчик на всю ширину — три поля в ряд на 375 дають
   смужки, у які не влучиш і в які не видно, що вводиш. */
@media (max-width: 640px) {
  .intake-queue__create input,
  .intake-queue__create .inv-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Кандидат на телефоні переносить кнопку під підпис. Відстань УСЕРЕДИНІ
     пари має бути меншою за відстань МІЖ парами — інакше «Це воно» стоїть
     рівно посередині двох кандидатів і не видно, до якого з них воно
     належить. */
  .intake-queue__candidate {
    align-items: flex-start;
    gap: var(--space-2);
  }

  .intake-queue__candidates {
    gap: var(--space-6);
  }
}

/* Topbar bell (docs/design/pm-topbar-bell.md, затверджено 07.09.2026) ----- */
.notif-bell {
  position: relative;
}

.notif-bell__button {
  position: relative;
  display: grid;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  flex: 0 0 var(--tap-target-min);
  place-items: center;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-muted);
  /* A real <a href="/notifications/">, not a <button>: without JS it just
     navigates there like any link (see the noscript rule that hides the
     empty dropdown shell); Alpine's @click.prevent intercepts the click
     when it IS running, so nothing ever actually follows this href then. */
  text-decoration: none;
}

.notif-bell__button:hover {
  background: var(--surface-hover);
}

/* Дизайн: підсвітка кольором коли дропдаун відкрито — стан, а не декор. */
.notif-bell__button[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

.notif-bell__button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-bell__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding-inline: 5px;
  border: 2px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--red-500);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Нуль непрочитаних → бейджа немає ВЗАГАЛІ, не «0» — [hidden] сам ставить
   display:none, але явно перекриваємо: .notif-bell__badge вище й так display
   не задає, цей рядок лише страхує порядок каскаду, якщо колись задасть. */
.notif-bell__badge[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 384px;
  max-width: calc(100vw - var(--space-4) * 2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.notif-panel__header strong {
  color: var(--text-strong);
  font-size: var(--text-base);
}

.notif-panel__mark-all {
  display: inline-flex;
  min-height: var(--tap-target-min);
  align-items: center;
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.notif-panel__mark-all:hover {
  background: var(--surface-hover);
}

.notif-panel__list {
  max-height: 360px;
  overflow-y: auto;
}

.notif-panel__row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: inherit;
  text-decoration: none;
}

.notif-panel__row:hover {
  background: var(--surface-hover);
}

/* Непрочитане позначене ТРИЧІ (фон + крапка + жирний текст), не лише
   кольором — перша версія мала тільки колір, перевірка контрасту показала
   фон ~1.02:1 проти білого (практично невидимий), звідси й вага шрифту. */
.notif-panel__row--unread {
  background: var(--accent-tint);
}

.notif-panel__row-marker {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

.notif-panel__row--unread .notif-panel__row-marker {
  background: var(--accent);
}

.notif-panel__row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-panel__row-title {
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.notif-panel__row--unread .notif-panel__row-title {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.notif-panel__row-time {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.notif-panel__footer {
  display: flex;
  min-height: var(--tap-target-min);
  align-items: center;
  justify-content: center;
  border-top: var(--border-width) solid var(--border-subtle);
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.notif-panel__footer:hover {
  background: var(--surface-hover);
}

.notif-panel__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.notif-panel__skeleton-row {
  height: 44px;
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  /* Аватар теж росте до 44 на телефоні: поруч 44-px дзвіночка два різні
     тап-цілі 36/38 px підряд читались би як помилка макета, не як два різні
     елементи (docs/design/pm-topbar-bell.md). Кнопка «Вийти» лишається 36 —
     вона одна, не сусідить із дзвіночком впритул. */
  .avatar {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    flex: 0 0 var(--tap-target-min);
  }

  /* ДИЗАЙН, прийомка 07.09: на 375 дзвіночок не скраю (праворуч від нього
     ще ім'я/аватар/вихід — тут лише аватар+вихід, але той самий принцип),
     тож "right: 0 відносно .notif-bell" тягнув панель ЗА лівий край екрана
     (виміряно: -92px). Якір переносимо на .user-panel (ширший контейнер,
     його правий край майже збігається з краєм екрана) — .notif-bell
     навмисно перестає бути positioned, щоб .notif-panel "проскочило" до
     нього по дереву предків. */
  .notif-bell {
    position: static;
  }

  /* right: 0 (not var(--space-4)) — .user-panel's OWN right edge already
     sits var(--space-3) in from the screen edge via .topbar__inner's own
     padding-inline; adding a second margin on top of that pushed the
     panel's left edge back off-screen (measured -4px). */
  .notif-panel {
    right: 0;
  }
}

/* ── Картка співробітника (docs/design/pm-user-card.md, ДИЗАЙН-8,
   затверджено власником 07.09.2026) ──────────────────────────────────────
   Розкладка навмисно та сама, що в картці обладнання (.asset-hero +
   .asset-card-grid): це дві картки одного застосунку, і людина, яка вивчила
   одну, не має вчитися вдруге. Тому тут лише те, чого в картці обладнання
   немає: аватар, пігулки, групи майна і блок «наступна ітерація». */

.person-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.person-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-top: var(--space-5);
}

.asset-card-grid__aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--gap-stack);
}

/* Загальне число — те, заради чого картку відкривають найчастіше («скільки
   всього на людині»), тому воно в заголовку секції, а не в кінці списку. */
.person-total {
  margin-left: auto;
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.person-group + .person-group {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
}

.person-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
}

.person-group__count {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.person-group__list {
  margin: var(--space-4) var(--space-0) var(--space-0);
  padding: var(--space-0);
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.person-group__row {
  display: grid;
  gap: var(--space-1);
}

/* Уся ціль — 44px заввишки: рядок майна на телефоні натискають пальцем. */
.person-group__link {
  display: flex;
  min-height: var(--tap-target-min);
  align-items: center;
}

.person-group__meta {
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

/* Підпис під секцією: «хто що змінює», «ще N», попередження про сесії.
   --text-muted, а не --text-faint: останній провалює WCAG AA як текст
   (борг, docs/design/README.md), а це осмислений текст, не декор. */
.card-section__note {
  margin: var(--space-4) var(--space-0) var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}

.card-section__note--warn {
  color: var(--status-pending-fg);
  font-weight: var(--fw-semibold);
}

/* Межа першої версії показана, а не прихована: блок є, він приглушений і
   підписаний. Порожнє місце читалося б як «загубилось» (спека §1). */
.card-section--next {
  background: var(--surface-app);
}

.card-section--next .card-section__title {
  color: var(--text-muted);
}

.card-section__badge {
  margin-left: auto;
  padding: var(--space-1) var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

@media (max-width: 640px) {
  .person-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: var(--text-lg);
  }
}

/* --------------------------------------------------------------------- *
 * Прогрес погодження на картці заявки (§J2, власник 21.09 ~10:00)
 * У ПОТОЦІ картки, без абсолютного позиціонування: на 400px пігулка
 * інакше налазить на статус у шапці. Розкривається тапом (details).
 * --------------------------------------------------------------------- */
.rq-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.rq-progress__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--status-pending-bd);
  border-radius: 999px;
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.rq-progress__pill--approved {
  border-color: var(--status-approved-bd);
  background: var(--status-approved-bg);
  color: var(--status-approved-fg);
}

.rq-progress__pill--rejected,
.rq-progress__pill--withdrawn {
  border-color: var(--status-rejected-bd);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}

/* «Повернуто на доопрацювання» — не відмова і не «йде як ішло»: у цьому
   стані хід стоїть і чекає на АВТОРА. Доти пігулка була нейтральна, тобто
   не відрізнялася від «Погодження 1/3» (рев'ю 21.09, п.10). */
.rq-progress__pill--revision_requested {
  border-color: var(--status-discrepancy-bd);
  background: var(--status-discrepancy-bg);
  color: var(--status-discrepancy-fg);
}

.rq-progress__who > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.rq-progress__steps {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-0) var(--space-0);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--status-draft-bd);
  border-radius: var(--space-3);
  list-style: none;
  font-size: var(--text-xs);
}

.rq-progress__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  overflow-wrap: anywhere;
}

.rq-progress__label,
.rq-progress__verdict,
.rq-progress__pending {
  grid-column: 2;
}

.rq-progress__mark {
  grid-row: 1;
  grid-column: 1;
}

.rq-progress__step--done .rq-progress__label {
  color: var(--status-approved-fg);
}

.rq-progress__step--current .rq-progress__label {
  font-weight: var(--fw-semibold);
}

.rq-progress__step--upcoming {
  color: var(--text-muted);
}

.rq-progress__verdict,
.rq-progress__pending {
  color: var(--text-muted);
}

/* Перемикач «Мої» / «Усі» (§J3) — лише ролям нагляду. */
.request-scope {
  display: inline-flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.request-scope__option {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--status-draft-bd);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}

.request-scope__option--active {
  border-color: var(--status-pending-bd);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-weight: var(--fw-semibold);
}

.request-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.request-pages__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.approval-card__own {
  color: var(--status-approved-fg);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.rq-reassign {
  margin-top: var(--space-5);
}

.rq-reassign__error {
  margin: var(--space-3) var(--space-0);
  color: var(--status-rejected-fg);
  font-size: var(--text-xs);
}

@media (max-width: 640px) {
  .rq-progress {
    gap: var(--space-2);
  }

  .rq-progress__pill {
    white-space: normal;
  }
}

/* ==========================================================================
   K (ПЛАН-21.09 «Мобільна версія»): єдиний екран «Реєстр», адаптивні
   колонки лише на телефоні, «Ще» в нижній навігації.
   ========================================================================== */

/* Перемикач режимів — посилання, не кнопки (див. registry_mode_tabs.html). */
.registry-mode-pill .stock-mode-pill__tab {
  text-decoration: none;
}

/* Пошук над таблицею: поле тягнеться, «Фільтри колонок» — поруч. */
.registry-search {
  margin-bottom: var(--space-4);
}

.registry-search .search-control {
  flex: 1 1 240px;
}

/* «Фільтри колонок» потрібна лише там, де рядок фільтрів згорнуто. */
.registry-search__filters {
  display: none;
}

/* Ручка згорнутих колонок: «▸» / «▾» замість вендорних +/−. */
.registry-screen .tabulator-responsive-collapse-toggle svg {
  display: none;
}

.registry-screen .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-md);
  cursor: pointer;
}

.registry-screen .tabulator-responsive-collapse-toggle::after {
  content: "▸";
}

.registry-screen .tabulator-responsive-collapse-toggle.open::after {
  content: "▾";
}

@media (max-width: 640px) {
  /* Сегмент «ОЗ · Малоцінка · Матеріали» на всю ширину. */
  .registry-mode-pill {
    display: flex;
    width: 100%;
  }

  .registry-mode-pill .stock-mode-pill__tab {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--control-h-touch);
    padding-inline: var(--space-3);
  }

  .registry-search__filters {
    display: inline-flex;
    min-height: var(--control-h-touch);
  }

  /* Телефон — екран пошуку «що і де лежить»: пошук і «Фільтри колонок» в
     один рядок, кнопки експорту/заведення — поруч, а не стовпчиком на всю
     ширину (загальне правило .filter-card > * { width: 100% }), щоб
     таблиця починалась на першому екрані. */
  .registry-screen .registry-search .search-control {
    width: auto;
    flex: 1 1 150px;
  }

  .registry-screen .registry-search .registry-search__filters {
    width: auto;
    flex: 0 0 auto;
  }

  .registry-screen .filter-card > .button {
    width: auto;
    flex: 1 1 auto;
    min-height: var(--control-h-touch);
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
  }

  /* Шість пунктів нижньої навігації на 360–400px: підпис дрібніший і
     обрізається, а не злипається з сусіднім («ПогодженняПриймання»). */
  .bottom-nav__link span {
    max-width: 100%;
    overflow: hidden;
    padding-inline: 1px;
    font-size: 10px;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Шапка з фільтрами колонок на телефоні ховається (K1); кнопка
     «Фільтри колонок» розгортає її. */
  .registry-screen:not(.registry-screen--filters-open) .tabulator-header-filter {
    display: none;
  }

  /* Довгі написи рядка експорту переносяться, а не розпирають картку. */
  .registry-screen .filter-card__count,
  .registry-screen .filter-card__sum {
    white-space: normal;
  }

  /* Перемикач «показати нульові» — звичайний чекбокс, а не поле на всю
     ширину (загальне правило .filter-card input { width: 100% }). */
  .registry-screen .filter-card__count input[type="checkbox"] {
    width: auto;
    height: auto;
  }

  /* Кошик для відповідального за склад на телефоні не показуємо (K3). */
  .workspace--no-phone-cart .cart-bar,
  .workspace--no-phone-cart .cart-sheet,
  .workspace--no-phone-cart .cart-sheet__backdrop {
    display: none !important;
  }

  .workspace--no-phone-cart {
    padding-bottom: var(--space-7);
  }

  /* «Ще» — шостий пункт нижньої навігації: нативний details. */
  .bottom-nav__more {
    display: flex;
    min-width: var(--tap-target-min);
    flex: 1 1 0;
  }

  .bottom-nav__more > summary {
    width: 100%;
    list-style: none;
    cursor: pointer;
  }

  .bottom-nav__more > summary::-webkit-details-marker {
    display: none;
  }

  .bottom-nav__more[open] > summary {
    color: var(--accent);
  }

  .more-sheet__backdrop {
    position: fixed;
    z-index: 31;
    inset: 0 0 calc(var(--bottomnav-h) + var(--safe-bottom)) 0;
    background: var(--overlay-scrim, rgb(0 0 0 / 40%));
  }

  .more-sheet {
    position: fixed;
    z-index: 32;
    right: 0;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
    left: 0;
    display: flex;
    max-height: 70vh;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-top: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
  }

  .more-sheet__title {
    margin: var(--space-0) var(--space-3) var(--space-3);
    color: var(--text-faint);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
  }

  .more-sheet__link {
    display: flex;
    min-height: var(--tap-target-min);
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }

  .more-sheet__link:active,
  .more-sheet__link:hover {
    background: var(--surface-header);
  }

  .more-sheet__link svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }
}

/* ==========================================================================
   G2 (ПЛАН-21.09 «Що на мені»): три незалежні перемикачі над таблицею —
   чекбокси-«пігулки» (partials/registry_mine.html, app.js wireMineRegistry).
   На телефоні — те саме, три пігулки в ряд із переносом.
   ========================================================================== */
.mine-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-0);
  padding: var(--space-0);
  border: 0;
  min-width: 0;
}

.mine-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h-md);
  padding: var(--space-0) var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.mine-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text-strong);
}

.mine-toggle:focus-within {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Загальне правило .filter-card input (висота поля, відступ під іконку
   пошуку, ширина 100% на телефоні) чекбоксу не підходить. */
.filter-card .mine-toggle input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: var(--space-0);
  padding: var(--space-0);
  accent-color: var(--accent);
}

.mine-toggle__count {
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: 400;
}

@media (max-width: 640px) {
  .mine-toggles {
    width: 100%;
  }

  .mine-toggle {
    flex: 1 1 auto;
    justify-content: center;
    min-height: var(--control-h-touch);
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
  }
}

/* ── Фото на картці (ПЛАН-КФ v2 §3.5, тег 2 «Фото») ──────────────────────
   Блок стоїть у шапці картки на місці колишньої заглушки .asset-hero__photo
   (вона лишається всередині — розмір 180/104 і рамка беруться звідти).
   Нових токенів немає — лише класи з наявних. */

.card-photos {
  display: flex;
  width: 180px;
  flex: 0 0 180px;
  flex-direction: column;
  gap: var(--space-3);
}

.card-photos__main {
  position: relative;
  padding: var(--space-0);
}

.card-photos__frame {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.card-photos__frame img,
.card-photos__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-photos__count {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(17, 19, 21, 0.72);
  color: var(--gray-0);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  pointer-events: none;
}

.card-photos__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.card-photos__thumb {
  height: 52px;
  padding: var(--space-0);
  overflow: hidden;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  opacity: 0.72;
}

.card-photos__thumb:hover,
.card-photos__thumb.is-active {
  opacity: 1;
}

.card-photos__thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ``hidden`` у блоці фото — справді сховано. Без цього ``.button``
   (display: inline-flex) перебивав атрибут, і кнопка «Завантажити», яку
   photos.js ховає (відправка йде одразу після вибору), лишалась видимою
   поруч із «Додати фото» (скріншот 390, рев'ю етапу 1). */
.card-photos [hidden] {
  display: none !important;
}

.card-photos__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-photos__add {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-photos__button {
  width: 100%;
  min-height: var(--control-h-md);
  gap: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

.card-photos__pick {
  position: relative;
  cursor: pointer;
}

.card-photos__pick.is-busy {
  cursor: progress;
  opacity: 0.7;
}

/* Поле файла — під кнопкою-підписом, а не display:none: так його досягає
   клавіатура, і браузер показує власну підказку «оберіть файл» на required. */
.card-photos__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.card-photos__pick:focus-within {
  box-shadow: var(--shadow-focus);
}

.card-photos__hint {
  margin: var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
}

.card-photos__error {
  margin: var(--space-0);
  font-size: var(--text-xs);
}

/* Панель картки ОЗ з реєстру: лише перегляд, фото над фактами — з тими
   самими відступами, що секції панелі (.asset-card__section). Лише прямий
   нащадок панелі: у панелі позиції фото стоїть у шапці (.asset-hero) і
   має розмір шапки. */
.asset-card > .card-photos--readonly {
  width: auto;
  padding: var(--space-7) var(--space-8) var(--space-0);
}

.asset-card > .card-photos--readonly .card-photos__thumbs {
  width: 180px;
}

/* Обгортка фото в шапці позиції (маркер data-item-photo-slot) не має
   ламати розкладку .asset-hero: її дитина — сам блок фото. */
.card-photos-slot {
  display: contents;
}

.photo-lightbox {
  position: fixed;
  z-index: 95; /* вище за модальну панель картки (.asset-card-overlay, 90) */
  inset: 0;
  display: grid;
  padding: var(--space-8) var(--space-10);
  place-items: center;
  background: rgba(17, 19, 21, 0.88);
}

.photo-lightbox__image {
  width: auto;
  max-width: min(100%, 1600px);
  height: auto;
  max-height: calc(100vh - 2 * var(--space-10));
  border-radius: var(--radius-md);
  background: var(--gray-0);
  object-fit: contain;
}

.photo-lightbox__close,
.photo-lightbox__nav {
  position: absolute;
  display: grid;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  place-items: center;
  border: var(--space-0);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--gray-0);
  font-size: var(--text-2xl);
  line-height: 1;
}

.photo-lightbox__close:hover,
.photo-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.26);
}

.photo-lightbox__close {
  top: var(--space-5);
  right: var(--space-5);
}

.photo-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.photo-lightbox__nav--prev {
  left: var(--space-4);
}

.photo-lightbox__nav--next {
  right: var(--space-4);
}

.photo-lightbox__count {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray-0);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

@media (max-width: 640px) {
  /* Телефон: шапка вже стовпцем; фото 104×104 (як заглушка), мініатюри й
     кнопки — праворуч від нього, а не стовпцем під ним. */
  .card-photos {
    display: grid;
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3) var(--space-4);
  }

  .card-photos__main,
  .card-photos > .asset-hero__photo {
    grid-row: span 2;
  }

  .card-photos__thumbs {
    grid-template-columns: repeat(3, 48px);
  }

  .card-photos__thumb {
    height: 48px;
  }

  .photo-lightbox {
    padding: var(--space-10) var(--space-2);
  }

  .photo-lightbox__image {
    max-height: calc(100vh - 2 * var(--space-12));
  }
}