/* Page wrapper is the shared .page (main.css) — #inv-card-drawer sizes against it. */

/* .inv-label is the shared .label (main.css) + block display. */
.inv-label {
    display: block;
}

.inv-optional {
    opacity: 0.4;
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: 0;
}

/* ═══════════════════════════════════════
   SHARED GRID
═══════════════════════════════════════ */

.inv-bins-view,
.inv-detail-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* .inv-bins-header is the shared .list-header (main.css). */

/* Shared .btn .btn--ghost .btn--mono (components.css) + muted rest. */
.inv-bins-create-btn {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 16px;
}

.inv-bins-create-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.inv-subtitle {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* ── Shared tile grid ── */
.inv-bins-grid {
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    overflow-y: auto;
    align-content: start;
}

/* .inv-bins-grid scrollbar is the shared .scroll-thin (main.css). */

/* ── Bin tile ── */
.inv-bin-tile.has-banner {
    position: relative;
}

/* Clips just the banner art to the tile's own rounded corners. This clip
   used to live on .inv-bin-tile itself, but that also clipped the value
   popup (a normal descendant that intentionally renders past the tile's
   bottom edge), un-rounding the tile and hiding part of the popup whenever
   it was open. Scoping the clip to a dedicated layer behind the banner
   keeps the corners rounded without clipping anything else in the tile. */
.inv-bin-banner-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.inv-bin-banner {
    position: absolute;
    /* Banner occupies the right portion of the tile, leaving clean space
       for the plain style on the left before the gradient begins */
    inset: 0 0 0 28%;
    /* Zoom past the card frame so only the art window shows */
    background-size: 118% auto;
    background-position: 42% 22%;
    opacity: 1;
    pointer-events: none;
    /* Plain tile on the left, ramping to full-strength art at the right edge */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 1));
    transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}

.inv-bin-tile.has-banner:hover .inv-bin-banner {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1));
}

.inv-bin-tile.has-banner > :not(.inv-bin-banner-clip) {
    position: relative;
    z-index: 1;
}

.inv-bin-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 90px;
    opacity: 0;
    animation: revealUp 0.3s ease forwards;
}

/* The entrance animation above gives every tile its own stacking context, so
   a tile in a later grid row paints over an earlier tile's value popup no
   matter how high the popup's own z-index is — z-index only ranks siblings
   within the same stacking context. This lifts the whole active tile (and
   everything nested in it, popup included) above its unhovered siblings
   while its popup is open (see showBinValuePopup in inventory.js). */
.inv-bin-tile.inv-bin-tile-popup-active {
    position: relative;
    z-index: 50;
}

.inv-bin-tile:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
    transform: translateY(-2px);
}

/* Hovering the value badge to open its popup necessarily also hovers the
   badge's parent tile (it's a descendant), which would otherwise trigger the
   lift above on every popup open/close, making the tile appear to shift/
   resize under the popup. Keep the tile still while its popup is shown. */
.inv-bin-tile.inv-bin-tile-popup-active:hover {
    transform: none;
}

.inv-bin-tile.default-bin {
    border-color: rgba(200, 169, 110, 0.3);
}

.inv-bin-tile.default-bin:hover {
    border-color: var(--accent);
}

.inv-bin-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-bin-icon {
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.7;
}

.inv-bin-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.inv-bin-desc {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1;
    line-height: 1.5;
    min-height: calc(0.68rem * 1.5 * 2);
}

.inv-bin-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    position: relative;
}

.inv-bin-meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.inv-bin-value-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--price-green);
    /* Solid dark backing (like .inv-price-badge) rather than a faint tinted
       one, so the badge stays readable over any bin banner art behind it,
       not just the plain tile background. */
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
}

.inv-bin-value-badge.inv-bin-value-loading {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.75);
    border-color: var(--border);
}

.inv-bin-value-badge.inv-bin-value-partial {
    color: var(--price-green);
    border-color: rgba(34, 197, 94, 0.35);
}

.inv-bin-value-popup {
    /* Anchored via position:absolute to its badge's own row (which the row
       gets position:relative for) rather than position:fixed with
       JS-computed viewport coordinates. The page applies `zoom: 0.9` below
       2100px (see main.css), and mixing zoom with getBoundingClientRect-based
       fixed-position math produced a left-ward offset that grew with the
       badge's distance from the page origin — worst on the first bin,
       smaller on later ones. Anchoring in the badge's own coordinate space
       sidesteps that entirely and needs no JS position math at all.

       Default (used inside a bin's detail header, .inv-detail-counts-row)
       opens downward — that badge sits right at the top of the page, so
       there's no room above it. The bin grid overrides this to open upward
       below, since .inv-bins-grid scrolls internally and badges there
       usually sit lower in the visible area, closer to its bottom edge. */
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 700;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    min-width: 150px;
    box-shadow: var(--shadow-menu);
    pointer-events: none;
    animation: contextReveal 0.12s ease;
}

.inv-bin-meta-row > .inv-bin-value-popup {
    top: auto;
    bottom: calc(100% + 8px);
}

.inv-bin-value-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}

.inv-bin-value-popup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.inv-bin-value-popup-dot-sale {
    background: var(--price-green);
}

.inv-bin-value-popup-dot-listing {
    background: var(--price-red);
}

.inv-bin-value-popup-dot-none {
    background: var(--text-muted);
}

.inv-bin-value-popup-label {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
}

.inv-bin-value-popup-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text);
}

/* "Default" bin badge uses the shared .tag primitive (components.css):
   `<span class="tag tag--accent">Default</span>`. */

/* ── Create / Add outline tile ── */
.inv-bin-create,
.inv-card-add-tile {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    opacity: 0;
    animation: revealUp 0.3s ease forwards;
}

.inv-bin-create {
    padding: 18px 22px;
    min-height: 90px;
}

.inv-card-add-tile {
    width: 100%;
    height: 355px;
    border-radius: 14px;
}

.inv-bin-create:hover,
.inv-card-add-tile:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
    color: var(--text);
    transform: translateY(-2px);
}

.inv-create-plus {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 200;
    opacity: 0.5;
}

.inv-create-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════
   BIN DETAIL VIEW
═══════════════════════════════════════ */

/* .inv-detail-header is the shared .detail-header (main.css). */

.inv-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    width: fit-content;
    transition: color 0.15s;
    letter-spacing: 0.04em;
}

.inv-detail-back:hover {
    color: var(--accent);
}

.inv-back-arrow {
    transition: transform 0.15s;
}

.inv-detail-back:hover .inv-back-arrow {
    transform: translateX(-3px);
}

.inv-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.inv-detail-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.inv-detail-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-detail-name-editable {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.inv-detail-name-editable:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.inv-detail-name-editable.editing {
    cursor: text;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
    white-space: nowrap;
}

.inv-detail-edit-icon {
    font-size: 0.62rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
    display: inline-block;
    transform: scaleX(-1);
    vertical-align: middle;
}

.inv-detail-edit-icon:hover {
    color: var(--accent);
}

.inv-detail-name-editable.editing ~ .inv-detail-edit-icon,
.inv-detail-meta-editable.editing ~ .inv-detail-edit-icon {
    opacity: 0;
}

.inv-detail-meta-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.inv-detail-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.inv-detail-meta-editable {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.inv-detail-meta-editable:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.inv-detail-meta-editable.editing {
    cursor: text;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}

.inv-detail-meta-placeholder {
    font-style: italic;
    opacity: 0.55;
}

.inv-detail-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.inv-detail-counts-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.inv-detail-counts {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.inv-detail-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Shared .btn .btn--ghost (components.css) as a 32px square. */
.inv-detail-add-btn {
    font-size: 1.2rem;
    line-height: 1;
    background: var(--bg);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-detail-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.inv-detail-controls input {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    outline: none;
    transition: border-color 0.2s;
    width: 160px;
}

.inv-detail-controls input:focus {
    border-color: var(--border-focus);
}

.inv-detail-controls input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.inv-sort-select {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Shared .btn .btn--icon (components.css), bordered. */
.inv-settings-btn {
    border-color: var(--border);
    color: var(--text-muted);
    font-size: 0.88rem;
}

.inv-settings-btn:hover {
    border-color: var(--border-focus);
    color: var(--text);
}

/* ── Card grid inside bin ── */
.inv-cards-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.inv-card-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    min-width: 0;
}

/* .inv-card-grid-wrap scrollbar is the shared .scroll-thin (main.css). */

/* Inventory drawer sidebar — mirror drawer.css but scoped */
#inv-drawer-sidebar {
    right: 830px;
}

/* Outer container now stacks section blocks vertically (deck-style);
   the per-section .inv-section-grid holds the actual card tile grid */
.inv-card-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Card tile ── */
.inv-card-tile {
    position: relative;
    cursor: pointer;
    opacity: 0;
    animation: revealUp 0.25s ease forwards;
}

.inv-card-tile.animated {
    animation: none;
    opacity: 1;
}

.inv-card-tile img {
    width: 100%;
    display: block;
}

/* ── Image loading placeholder — same treatment as #card-results (cards.css)
   and the drawer's edition grid (drawer.css). Scoped to .inv-card-tile
   rather than repeated per page: buildDeckCardTile (decks_ga.js) already
   adds "inv-card-tile" alongside "dga-card-tile" specifically to inherit
   shared tile styling like this, so Decks GA's own grid gets this for free.
   .edition-tile-wrap's own position:relative is already global (drawer.css);
   overflow:hidden/border-radius are already set for this class (tiles.css) —
   only the aspect-ratio reservation and the spinner-to-image crossfade are
   new here. buildInvCardTile/buildDeckCardTile wire the spinner markup and
   the img's onload="revealTileImage(this)" (tiles.js). */
.inv-card-tile .edition-tile-wrap {
    aspect-ratio: 5 / 7;
    background: var(--bg-card);
}

.inv-card-tile .edition-tile-wrap img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.inv-card-tile .edition-tile-wrap img.tile-img-loaded {
    opacity: 1;
}

/* Hover-zoom/dim behavior lives in tiles.css's shared .tile-hoverable/
   .tile-zoom vocabulary — see buildInvCardTile in inventory.js. */


.inv-card-tile-overlay {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 14px 10px;
    pointer-events: none;
    gap: 0;
    z-index: 1;
}

.inv-card-tile:hover .inv-card-tile-overlay {
    opacity: 1;
}

/* Hide badges on hover */
.inv-card-tile:hover .inv-qty-badge,
.inv-card-tile:hover .edition-rarity-badge {
    opacity: 0;
    transition: opacity 0.15s;
}

.inv-card-tile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.inv-card-tile-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* .inv-card-tile-foil → moved to tiles.css */

.inv-card-tile-qty-ctrl {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2;
}

.inv-card-tile:hover .inv-card-tile-qty-ctrl {
    opacity: 1;
    pointer-events: all;
}

/* Shared .btn .btn--icon (components.css) at 34px; on-image white glyph. */
.inv-tile-qty-btn {
    --btn-size: 34px;
    border-radius: 6px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.inv-tile-qty-btn.inv-tile-qty-add {
    background: rgba(80, 180, 100, 0.3);
    border-color: rgba(80, 180, 100, 0.5);
}

.inv-tile-qty-btn.inv-tile-qty-sub {
    background: rgba(200, 80, 80, 0.3);
    border-color: rgba(200, 80, 80, 0.5);
}

.inv-tile-qty-btn.inv-tile-qty-add:hover {
    background: rgba(80, 180, 100, 0.55);
    border-color: rgba(80, 180, 100, 0.85);
    filter: brightness(1.15);
}

.inv-tile-qty-btn.inv-tile-qty-sub:hover {
    background: rgba(200, 80, 80, 0.55);
    border-color: rgba(200, 80, 80, 0.85);
    filter: brightness(1.15);
}

.inv-tile-qty-input {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 0;
    width: 54px;
    height: 54px;
    text-align: center;
    outline: none;
    line-height: 54px;
    transition: border-color 0.15s, background 0.15s;
}

.inv-tile-qty-input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--accent);
}

.inv-tile-qty-input::-webkit-inner-spin-button,
.inv-tile-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.inv-qty-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.inv-price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--price-green);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.inv-listing-badge {
    position: absolute;
    top: 38px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--price-red);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.inv-listing-badge--solo {
    top: 10px;
}

.inv-card-tile:hover .inv-price-badge,
.inv-card-tile:hover .inv-listing-badge {
    opacity: 0;
    transition: opacity 0.15s;
}

/* Rarity badge overrides inside inventory card tiles */
.inv-card-tile .edition-rarity-badge {
    bottom: 10px;
    left: 10px;
    font-size: 0.75rem;
    padding: 3px 8px;
}

.inv-card-tile .edition-rarity-badge.has-foil-suffix {
    padding-right: 4px;
}

.inv-empty-grid {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.inv-empty-icon {
    font-size: 2rem;
    opacity: 0.15;
    display: block;
    margin-bottom: 6px;
}

.inv-empty-grid p {
    font-size: 0.85rem;
}

.inv-empty-sub {
    font-size: 0.75rem !important;
    opacity: 0.6;
}

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */

/* .inv-modal-overlay is the shared .overlay (components.css). */

/* .inv-modal is the shared .modal (components.css) at a fixed 380px width. */
.inv-modal {
    width: 380px;
}

.inv-modal-wide {
    width: max-content;
    min-width: 340px;
    /* max-width is just a generous cap, not an exact-fit formula — width:
       max-content already sizes this box to hug whatever .inv-add-results
       actually needs (its fixed columns + gaps + its own padding), so the
       cap only has to sit comfortably above the real 5-column max (currently
       ~1350px) rather than exactly mirror it. That match-two-formulas
       approach broke the first time .inv-add-results' own padding changed
       (its hover-zoom clearance) without this cap being updated to match —
       a generous round cap can't drift out of sync the same way. */
    max-width: min(1500px, 95vw);
    max-height: 92vh;
    overflow-y: visible;
    box-sizing: border-box;
    padding: 24px;
}

.inv-modal-wide.inv-modal-foil-step {
    width: 700px;
    max-width: min(700px, 95vw);
}

/* ── Cross-modal resize morph (e.g. Settings → Import/Export) ── */
.inv-modal.morph-resizing {
    animation: none;
}

.inv-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inv-modal-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.inv-modal-set {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.inv-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
    flex-shrink: 0;
}

.inv-modal-close:hover {
    color: var(--error);
}

.inv-modal-img {
    width: 130px;
    border-radius: 11px;
    display: block;
    flex-shrink: 0;
}

.inv-modal-img-large {
    width: 260px;
    border-radius: 16px;
    display: block;
    flex-shrink: 0;
}

/* Add card search step */
.inv-add-search-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inv-add-results {
    margin-top: 14px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 255px));
    gap: 12px;
    align-content: start;
    /* Room for the tile hover-zoom (.inv-search-tile:hover scales
       .edition-tile-wrap up 4%, ~5px outward per side on a 255px-wide tile)
       to grow without being clipped by this container's own overflow —
       most noticeable on the first row (no row above to borrow clearance
       from) and the last column (no track to its right). Kept a bit above
       the ~5px the zoom actually needs so sub-pixel rounding never eats
       into it. Same reasoning as .prices-search-results in prices.css. */
    padding: 8px 8px 4px;
}

.inv-add-results.has-scroll {
}

/* .inv-add-results hides its scrollbar via the shared .scroll-none (main.css). */

.inv-search-placeholder {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-align: center;
}

.inv-search-placeholder p {
    font-size: 0.8rem;
    opacity: 0.6;
}

.inv-search-tile {
    position: relative;
    cursor: pointer;
    opacity: 0;
    animation: revealUp 0.2s ease forwards;
}

.inv-search-tile.animated {
    animation: none;
    opacity: 1;
}

.inv-search-tile img {
    width: 100%;
    aspect-ratio: 5 / 7;
    display: block;
}

/* Clipping lives here, not on .inv-search-tile itself — the shared
   .tile-zoom rule (tiles.css) scales this same element, so the rounded-
   corner clip boundary moves with the zoomed image instead of staying
   pinned at the original size while the image grows underneath it (the
   "porthole" look a fixed outer clip + inner-only zoom produces). Same fix
   as .prices-watch-tile-media/.prices-search-tile-media in prices.css and
   .inv-card-tile's own .edition-tile-wrap. This isn't `.inv-card-tile` or
   `.card-tile--authed`, so it doesn't inherit tiles.css's shared clip rule
   and needs its own copy. */
.inv-search-tile .edition-tile-wrap {
    overflow: hidden;
    border-radius: 14px;
}

/* Hover-zoom/dim/action-button behavior lives in tiles.css's shared
   .tile-hoverable/.tile-zoom/.tile-action-btn vocabulary — see the
   search-results tile template in inventory.js and decks_ga.js. */

/* Foil step */
.inv-add-card-preview {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.inv-add-card-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Foil step layout */
.inv-foil-step-body {
    display: flex;
    gap: 24px;
    align-items: stretch;
    height: 380px;
}

.inv-foil-step-body .inv-modal-img-large {
    height: 100%;
    width: auto;
    object-fit: cover;
}

.inv-foil-step-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    overflow: hidden;
}

.inv-foil-step-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.inv-foil-step-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.inv-add-modal-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-add-modal-header .inv-modal-title {
    flex: 1;
    white-space: nowrap;
}

.inv-btn-back-arrow {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.inv-btn-back-arrow:hover {
    border-color: var(--border-focus);
    color: var(--text);
    background: var(--bg-hover);
}

.inv-card-modal-foil {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text);
}

.inv-card-modal-hint {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.inv-modal-foils {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.inv-modal-foils::-webkit-scrollbar {
    width: 6px;
}

.inv-modal-foils::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.inv-foil-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s;
    gap: 6px;
}

.inv-foil-option:hover {
    border-color: var(--border-focus);
}

.inv-foil-option.selected {
    border-color: var(--accent);
    background: rgba(200, 169, 110, 0.06);
}

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

.inv-foil-name {
    font-size: 0.82rem;
    color: var(--text);
}

.inv-foil-meta {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: var(--text-muted);
}

.inv-foil-temp-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    background: transparent;
    vertical-align: middle;
}

.inv-foil-check {
    width: 14px;
    height: 14px;
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.inv-foil-option.selected .inv-foil-check {
    background: var(--accent);
    border-color: var(--accent);
}

.inv-modal-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv-qty-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shared .btn .btn--ghost (components.css) as a 32px square. */
.inv-qty-btn {
    width: 32px;
    height: 32px;
    background: var(--bg);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-qty-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Base input styling is global (components.css); overrides only. */
.inv-qty-input {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    padding: 5px 8px;
    width: 56px;
    text-align: center;
}

.inv-qty-input:focus {
    border-color: var(--border-focus);
}

.inv-qty-input::-webkit-inner-spin-button,
.inv-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.inv-btn-back {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.inv-btn-back:hover {
    border-color: var(--border-focus);
    color: var(--text);
}

/* Common modal fields */
.inv-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inv-field-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* .inv-field-label is the shared .label .label--muted (main.css) at a smaller size. */
.inv-field-label {
    font-size: 0.68rem;
}

/* Shared .input (components.css). */
.inv-text-input {
    font-size: 0.88rem;
    padding: 9px 12px;
}

.inv-modal-error {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--error);
    background: rgba(200, 110, 110, 0.08);
    border: 1px solid rgba(200, 110, 110, 0.2);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.inv-modal-actions {
    display: flex;
    gap: 6px;
}

.inv-modal-submit {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    cursor: pointer;
    transition: background 0.2s;
    flex: 1;
}

.inv-modal-submit:hover {
    background: var(--accent-dim);
}

.inv-modal-submit:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

.inv-modal-danger {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--error);
    background: none;
    border: 1px solid rgba(200, 110, 110, 0.3);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.inv-modal-danger:hover {
    background: rgba(200, 110, 110, 0.08);
    border-color: var(--error);
}

.inv-foil-step-right .inv-modal-set {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Bin context menu ── */
.inv-context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    z-index: 600;
    min-width: 160px;
    box-shadow: var(--shadow-menu);
    animation: contextReveal 0.12s ease;
}

.inv-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.inv-context-item:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.inv-context-icon {
    font-size: 0.8rem;
    opacity: 0.7;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.inv-context-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.inv-context-item-danger {
    color: var(--error) !important;
    opacity: 0.75;
}

.inv-context-item-danger:hover {
    background: rgba(200, 110, 110, 0.1) !important;
    color: var(--error) !important;
    opacity: 1;
}

.inv-btn-make-default {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent);
    background: none;
    border: 1px solid rgba(200, 169, 110, 0.3);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.inv-btn-make-default:hover {
    background: rgba(200, 169, 110, 0.08);
    border-color: var(--accent);
}


/* ── Bin filter dropdown ── */
.inv-filter-dropdown-wrap {
    position: relative;
}

/* Shared .btn .btn--ghost .btn--mono (components.css). */
.inv-filter-dropdown-btn {
    font-size: 0.78rem;
    background: var(--bg);
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.inv-filter-dropdown-btn:hover,
.inv-filter-dropdown-btn.open {
    border-color: var(--border-focus);
}

.inv-filter-dropdown-btn.active {
    border-color: var(--accent);
    color: var(--accent);
}

/* .inv-filter-arrow is the shared .dropdown-arrow (components.css). */

/* Shared .menu (components.css) — scrolls when tall. */
.inv-filter-menu {
    right: 0;
    left: auto;
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.inv-filter-menu::-webkit-scrollbar {
    width: 6px;
}

.inv-filter-menu::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.inv-filter-menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.inv-filter-section {
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--border);
}

.inv-filter-section:last-of-type {
    border-bottom: none;
}

/* .inv-filter-section-label is the shared .label .label--muted .label--sm (main.css). */
.inv-filter-section-label {
    margin-bottom: 6px;
}

.inv-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 6px;
}

.inv-filter-chip {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.inv-filter-chip:hover {
    border-color: var(--border-focus);
    color: var(--text);
}

.inv-filter-chip.selected {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200, 169, 110, 0.08);
}

/* Shared .btn .btn--subtle .btn--mono (components.css) + full-width row style. */
.inv-filter-clear-btn {
    display: block;
    width: 100%;
    font-size: 0.7rem;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 14px;
    text-align: left;
    letter-spacing: 0.04em;
}

.inv-filter-clear-btn:hover {
    color: var(--error);
}

.inv-filter-search-wrap {
    padding-bottom: 6px;
}

.inv-filter-search-input {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.inv-filter-search-input:focus {
    border-color: var(--border-focus);
}

.inv-filter-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.inv-detail-search {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    outline: none;
    transition: border-color 0.2s;
    width: 200px;
}

.inv-detail-search:focus {
    border-color: var(--border-focus);
}

.inv-detail-search::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

/* Dim handled by .card-tile-dim inside .edition-tile-wrap — see tiles.css */

/* ── Move card modal ── */
.inv-move-card-info {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2px 0 4px;
}

.inv-move-bin-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 280px;
    overflow-y: auto;
}

.inv-move-bin-list::-webkit-scrollbar {
    width: 6px;
}

.inv-move-bin-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.inv-move-bin-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: left;
    width: 100%;
}

.inv-move-bin-option:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200, 169, 110, 0.06);
}

.inv-move-bin-option-meta {
    font-size: 0.66rem;
    opacity: 0.5;
}

.inv-move-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Shared .btn .btn--ghost (components.css) + dashed border, mono, muted. */
.inv-move-new-bin-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-style: dashed;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: left;
}

.inv-move-new-bin-btn:hover {
    border-color: var(--border-focus);
    color: var(--text);
}

.inv-move-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Quantity confirmation banner ── */
.inv-card-grid-wrap {
    position: relative;
}

.inv-qty-confirm-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: fit-content;
    min-width: 380px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 14px;
    background: rgba(180, 40, 40, 0.92);
    border: 1px solid rgba(220, 80, 80, 0.6);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease, background 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.inv-qty-confirm-bar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: all;
}

.inv-qty-confirm-bar.confirmed {
    background: rgba(40, 140, 70, 0.92);
    border-color: rgba(80, 200, 100, 0.6);
    pointer-events: none;
}

.inv-qty-confirm-bar.hidden {
    display: none;
}

.inv-qty-confirm-msg {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.inv-qty-confirm-actions {
    display: flex;
    gap: 6px;
}

.inv-qty-confirm-btn {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter 0.15s;
}

.inv-qty-confirm-apply {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.inv-qty-confirm-apply:hover {
    filter: brightness(1.2);
}

.inv-qty-confirm-discard {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.inv-qty-confirm-discard:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ── Edit mode quantity indicator ── */
/* Shown when tile has a pending change and is NOT being hovered */
.inv-tile-qty-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.15s;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 14px;
}

.inv-card-tile.has-pending .inv-tile-qty-indicator {
    opacity: 1;
}

/* Hide indicator while hovering — qty-ctrl takes over */
.inv-card-tile.has-pending:hover .inv-tile-qty-indicator {
    opacity: 0;
}

.inv-tile-qty-indicator-box {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    border: 2px solid;
    pointer-events: none;
    user-select: none;
}

.inv-tile-qty-indicator-box.indicator-add {
    color: rgba(80, 210, 110, 1);
    border-color: rgba(80, 210, 110, 0.7);
    background: rgba(80, 210, 110, 0.15);
}

.inv-tile-qty-indicator-box.indicator-sub {
    color: rgba(220, 80, 80, 1);
    border-color: rgba(220, 80, 80, 0.7);
    background: rgba(220, 80, 80, 0.15);
}

.inv-tile-qty-indicator-box.indicator-del {
    color: rgba(220, 80, 80, 1);
    border-color: rgba(220, 80, 80, 0.7);
    background: rgba(220, 80, 80, 0.15);
    font-size: 1.3rem;
}

/* ── Import / Export modal ── */
.inv-modal-import-export {
    width: 520px;
    max-width: min(520px, 95vw);
}

.dga-import-export-title-wrap,
.inv-import-export-title-wrap {
    flex: 1;
}

.inv-import-export-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.inv-import-export-tab {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.inv-import-export-tab:hover {
    color: var(--text);
}

.inv-import-export-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.inv-import-format-hint {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.inv-import-format-hint code {
    color: var(--text);
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.inv-textarea-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-y: auto;
    height: 180px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
    background: var(--bg);
}

.inv-textarea-wrap:focus-within {
    border-color: var(--border-focus);
}

/* .inv-textarea-wrap / .inv-import-textarea hide their scrollbars via the
   shared .scroll-none (main.css). */

.inv-import-textarea {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 0;
    padding: 10px 12px;
    width: 100%;
    min-height: 180px;
    height: auto;
    resize: none;
    outline: none;
    overflow: visible;
    line-height: 1.6;
    box-sizing: border-box;
    margin-bottom: 0;
    display: block;
}

.inv-import-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.4;
}


.inv-import-summary {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

.inv-import-summary--ok {
    color: #4caf7d;
    background: rgba(76, 175, 125, 0.08);
    border: 1px solid rgba(76, 175, 125, 0.25);
}

.inv-import-summary--err {
    color: var(--error);
    background: rgba(200, 110, 110, 0.08);
    border: 1px solid rgba(200, 110, 110, 0.2);
}

.inv-import-error-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.inv-import-error-text {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--error);
}

.inv-import-error-raw {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ── Import progress bar ── */
.inv-progress-wrap {
    padding: 10px 0 4px;
}

.inv-progress-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-progress-track {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.inv-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* ── Import footer — button + progress/results side by side ── */
.inv-import-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.inv-import-footer .inv-import-results {
    flex: 1;
    margin-top: 0;
    max-height: none;
}

.inv-import-footer .inv-modal-submit {
    flex: 0 0 auto;
    white-space: nowrap;
}


/* Shared .btn .btn--ghost .btn--mono (components.css) + full-width row style. */
.inv-settings-import-export-btn {
    width: 100%;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 9px 14px;
    text-align: left;
    margin-top: 4px;
}

.inv-settings-import-export-btn:hover {
    border-color: var(--border-focus);
    color: var(--text);
}


/* Scrollbar hidden via the shared .scroll-none (main.css). */
.inv-import-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    max-height: 140px;
    overflow-y: auto;
}

/* ── Bin sections ── */

.inv-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 255px);
    gap: 14px;
    align-content: start;
    justify-content: center;
}

.inv-section-grid.inv-drop-target {
    outline: 2px dashed var(--accent);
    outline-offset: 8px;
    border-radius: var(--radius);
}

.inv-add-section-input {
    background: var(--bg-card);
    color: var(--text);
    text-align: center;
    outline: none;
}

/* Drag-triggered re-renders skip the tile fan reveal */
.inv-no-anim .inv-card-tile,
.inv-no-anim .inv-card-add-tile {
    animation: none;
    opacity: 1;
}

/* Move modal: selected bin/section highlighting + disabled source section */
.inv-move-bin-option.active {
    border-color: var(--accent);
    color: var(--accent);
}

.inv-move-bin-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.inv-move-section-block .inv-field-label {
    display: block;
    margin-bottom: 6px;
}
/* ═══════════════════════════════════════
   COLLABORATIVE SHARING
   ═══════════════════════════════════════ */

/* "Shared with me" — a full-column section appended inside the owned #inv-bins-grid
   / #dga-deck-grid so it sits within the grid's 32px padding (header/border no
   longer edge-to-edge) and scrolls with it. Header reuses .dga-section-block /
   .dga-section-header / .dga-section-label / .dga-section-count from the public
   Collection & Decks pages (decks_ga.css). */
.inv-shared-block {
    grid-column: 1 / -1;
    margin-top: 12px;
}
/* The inner tile grid inherits .inv-bins-grid / .dga-deck-grid's own page
   padding + internal scroll — strip both; the outer grid already provides them.
   ID selectors so this also beats mobile.css's own .inv-bins-grid padding. */
#inv-shared-grid,
#dga-shared-grid {
    padding: 0;
    overflow: visible;
}
/* The share-role badge on a shared bin/deck tile uses the shared .tag
   primitive (components.css) — roleTagHTML() in inventory.js maps the role
   to a hue: viewer → .tag--slate, editor → .tag--mint, manager → .tag--gold. */

/* Role gating on an open shared bin. Everything above the caller's role is
   hidden; invApplyRoleGate() toggles the .inv-role-* class on #inv-detail-view. */
.inv-detail-view.inv-role-viewer .inv-detail-add-btn,
.inv-detail-view.inv-role-viewer .inv-settings-btn:not(#inv-share-btn),
.inv-detail-view.inv-role-viewer .dga-add-section-btn,
.inv-detail-view.inv-role-viewer .inv-card-tile-qty-ctrl,
.inv-detail-view.inv-role-viewer .inv-detail-edit-icon {
    display: none !important;
}
.inv-detail-view.inv-role-viewer .inv-detail-name-editable,
.inv-detail-view.inv-role-viewer .inv-detail-meta-editable {
    pointer-events: none;
}
.inv-detail-view.inv-role-viewer .inv-card-tile { cursor: default; }

/* Share dialog */
.inv-share-hint {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #9aa0aa);
    margin: 0 0 14px;
}
.inv-share-hint b { color: var(--text, #ddd); font-weight: 600; }
.inv-share-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.inv-share-omni-wrap { flex: 1 1 auto; min-width: 0; }
.inv-share-omni-wrap .inv-text-input { width: 100%; }
/* Match the input's box height exactly: the input is .inv-text-input's
   9px vertical padding + the base 1px input border; .inv-modal-submit has no
   border, so add a transparent one and use the same padding. */
.inv-share-add-btn {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 9px 18px;
    border: 1px solid transparent;
}

/* Collaborator picker autocomplete items — "username" left, muted "#omni" right,
   matching the card-name autocomplete look (.autocomplete-item, cards.css). */
.share-ac-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.share-ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-ac-omni {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.share-ac-item.selected .share-ac-omni,
.share-ac-item:hover .share-ac-omni { color: var(--accent); }
.inv-share-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inv-share-loading {
    font-size: 0.82rem;
    color: var(--text-muted, #888);
    padding: 8px 2px;
}
.inv-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border, #2c2c2c);
    border-radius: 8px;
}
.inv-share-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.inv-share-name { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-share-omni-tag { font-size: 0.7rem; color: var(--text-muted, #777); }
/* Per-row role picker (a .select-dropdown wrapped in .inv-share-role-select). */
.inv-share-row .inv-share-role-select { flex: 0 0 auto; width: 108px; }
.inv-share-row .select-dropdown-btn { padding: 6px 10px; font-size: 0.78rem; }
.inv-share-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 5px;
}
.inv-share-remove:hover { color: #e06666; background: rgba(224, 102, 102, 0.12); }