/* My listings: a seller workspace with status navigation beside compact listing rows. */
.page-shell--inventory { display: grid; gap: var(--space-6); }
.page-shell--inventory-workspace { gap: var(--space-8); }
.inventory-header { gap: var(--space-4) var(--space-6); flex-wrap: wrap; }
.inventory-header__lead { max-width: 38rem; margin: .75rem 0 0; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.6; }
.inventory-header__actions .button svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 39.99rem) {
  /* Phones: keep the first listing near the fold. The lead stays available to assistive
     technology (the market heading uses the same pattern); each status panel explains itself. */
  .page-shell--inventory-workspace { gap: var(--space-6); }
  .inventory-header__lead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

.inventory-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 64rem) {
  .inventory-workspace { grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); gap: var(--space-8); }
  .inventory-workspace__nav { position: sticky; top: 7rem; }
}

/* Status navigation: stacked tiles (2x2 on phones, one row of four from 40rem), a sidebar on desktop. */
.inventory-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.inventory-tabs__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
  min-height: 56px; padding: .6rem .75rem; color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none;
  transition: background var(--motion-short), border-color var(--motion-short), color var(--motion-short);
}
.inventory-tabs__link:hover { border-color: var(--color-border-strong); background: var(--color-surface-subtle); }
.inventory-tabs__link[aria-current="page"] { color: var(--color-action); background: color-mix(in srgb, var(--color-action) 10%, var(--color-surface)); border-color: var(--color-action); }
.inventory-tabs__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--color-action); background: var(--color-surface-subtle); border-radius: 50%; }
.inventory-tabs__icon svg { width: 1.15rem; height: 1.15rem; }
.inventory-tabs__link[aria-current="page"] .inventory-tabs__icon { color: var(--color-text-inverse); background: var(--color-action); }
.inventory-tabs__text { display: grid; min-width: 0; }
.inventory-tabs__label { overflow-wrap: break-word; font-weight: 700; line-height: 1.3; }
.inventory-tabs__hint { display: none; color: var(--color-text-secondary); font-size: .8rem; line-height: 1.35; }
.inventory-tabs__count { min-width: 2rem; padding: .1rem .5rem; color: var(--color-text); background: var(--color-surface-subtle); border-radius: 999px; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.inventory-tabs__link[aria-current="page"] .inventory-tabs__count { color: var(--color-text-inverse); background: var(--color-action); }
@media (max-width: 63.99rem) {
  /* Tiles stack icon + count above the label so the longest Latvian label keeps its full width. */
  .inventory-tabs__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon count" "text text"; gap: .4rem; padding: .7rem .75rem; }
  .inventory-tabs__icon { grid-area: icon; width: 2rem; height: 2rem; }
  .inventory-tabs__text { grid-area: text; }
  .inventory-tabs__count { grid-area: count; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .inventory-tabs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .inventory-tabs__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .inventory-tabs__link { min-height: 64px; background: transparent; border-color: transparent; }
  .inventory-tabs__hint { display: block; }
}

/* Selected status */
.inventory-panel { display: grid; gap: var(--space-4); min-width: 0; }
.inventory-panel__header { display: grid; gap: .4rem; }
.inventory-panel__header h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.inventory-panel__header p { max-width: 46rem; margin: 0; color: var(--color-text-secondary); }
.inventory-panel__limit { margin: 0; color: var(--color-text-secondary); font-size: .875rem; }
.inventory-panel .empty-state__title { font-size: clamp(1.3rem, 2vw, 1.6rem); }

/* Listing rows */
.inventory-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.inventory-item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "media body" "actions actions";
  gap: .85rem 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: border-color var(--motion-short), box-shadow var(--motion-short);
}
.inventory-item:hover, .inventory-item:focus-within { border-color: var(--color-border-strong); box-shadow: var(--shadow-soft); }
@media (min-width: 48rem) {
  .inventory-item { grid-template-columns: 7rem minmax(0, 1fr); grid-template-areas: "media body" "media actions"; gap: .75rem 1.25rem; padding: 1rem 1.25rem 1rem 1rem; }
}
.inventory-item__media {
  position: relative; grid-area: media; display: grid; place-items: center; align-self: start; aspect-ratio: 1; overflow: hidden;
  color: var(--color-text-secondary); background: var(--color-surface-subtle); border-radius: var(--radius-sm);
}
.inventory-item__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.inventory-item__media svg { width: 1.75rem; height: 1.75rem; }
.inventory-item__body { grid-area: body; display: grid; align-content: start; gap: .3rem; min-width: 0; }
.inventory-item__labels { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; }
.inventory-item__kind { color: var(--color-action); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.inventory-item__kind--wanted { color: var(--color-accent); }
.inventory-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.45; }
.inventory-chip svg { width: .9rem; height: .9rem; }
.inventory-chip--positive { color: var(--color-action); background: color-mix(in srgb, var(--color-action) 12%, var(--color-surface)); }
.inventory-chip--accent { color: var(--color-text); background: var(--color-accent-soft); }
.inventory-chip--accent svg { color: var(--color-accent); }
.inventory-chip--warning { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); }
.inventory-chip--neutral { color: var(--color-text); background: var(--color-surface-subtle); }
.inventory-item__title { margin: .1rem 0 0; font: 700 1.05rem/1.35 var(--font-display); letter-spacing: -.02em; }
.inventory-item__link { text-decoration: none; }
.inventory-item__link:hover { text-decoration: underline; text-underline-offset: .15em; }
.inventory-item__price { margin: 0; color: var(--color-price); font-weight: 750; font-variant-numeric: tabular-nums; }
.inventory-item__price--budget { font-weight: 650; }
.inventory-item__dates { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; margin: 0; padding: 0; list-style: none; color: var(--color-text-secondary); font-size: .8125rem; }
.inventory-item__dates time, .inventory-item__undo time { color: var(--color-text); font-weight: 650; }
.inventory-item__undo { margin: 0; color: var(--color-text-secondary); font-size: .8125rem; }
.inventory-item__note { width: fit-content; max-width: 100%; margin: .25rem 0 0; padding: .4rem .7rem; color: var(--color-text); background: var(--color-surface-subtle); border-radius: var(--radius-sm); font-size: .8125rem; }

/* Row actions: one emphasised next step, Edit and a More menu. */
.inventory-item__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; padding-top: .85rem; border-top: 1px solid var(--color-border); }
.inventory-item__actions .inventory-action-form { display: inline-flex; margin: 0; }
@media (max-width: 47.99rem) {
  /* Phones: the emphasised next step spans the row. The other controls share rows while
     their labels fit and each takes its own row when it does not, so a long label
     (e.g. "Atcelt rezervāciju") wraps between words or moves down instead of splitting. */
  .inventory-item__actions > * { flex: 1 1 auto; }
  .inventory-item__actions > .inventory-action--primary, .inventory-item__actions > .inventory-action-form--primary { flex-basis: 100%; }
  .inventory-item__actions .inventory-action-form .button, .inventory-item__actions > .inventory-menu > summary { width: 100%; }
  .inventory-item__actions > .inventory-menu { margin-left: 0; }
}
@media (min-width: 48rem) { .inventory-item__actions { padding-top: 0; border-top: 0; } }
/* Row and menu labels wrap only between words; the shared .button rule allows any break. */
.inventory-action, .inventory-menu__item { overflow-wrap: break-word; }
.inventory-action { min-height: 44px; margin-top: 0; padding: .5rem 1rem; gap: .45rem; font-size: .875rem; }
.inventory-action svg { width: 1.1rem; height: 1.1rem; }
.inventory-action--primary { color: var(--color-action); background: color-mix(in srgb, var(--color-action) 12%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-action) 35%, var(--color-surface)); }
.inventory-action--primary:hover { background: color-mix(in srgb, var(--color-action) 20%, var(--color-surface)); }
.inventory-action--secondary { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); }
.inventory-action--secondary:hover { background: var(--color-surface-subtle); }

.inventory-menu { position: relative; margin-left: auto; }
.inventory-menu > summary { list-style: none; }
.inventory-menu > summary::-webkit-details-marker { display: none; }
.inventory-menu[open] > summary { background: var(--color-surface-subtle); }
.inventory-menu__panel {
  position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; display: grid; gap: .15rem;
  width: max-content; min-width: 13rem; max-width: min(20rem, calc(100vw - 2.5rem)); margin: 0; padding: .4rem; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
}
.inventory-menu__panel .inventory-action-form { display: block; margin: 0; }
.inventory-menu__item {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .5rem .75rem;
  color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer;
}
.inventory-menu__item:hover { background: var(--color-surface-subtle); }
.inventory-menu__item:focus-visible { outline-offset: -3px; }
.inventory-menu__item svg { width: 1.1rem; height: 1.1rem; color: var(--color-text-secondary); }

/* Lower-price and confirmation pages */
.inventory-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inventory-actions .button { margin-top: 0; }
.inventory-action-form { display: inline-flex; margin: 0; }
.inventory-price-current { margin: var(--space-4) 0 0; }
.inventory-price-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.inventory-price-shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inventory-confirm-form { margin-top: var(--space-6); }