/* ═══════════════════════════════════════
   tiles.css — shared card tile additions
   inventory.css remains the source of truth for overlay/qty/badge styles.
═══════════════════════════════════════ */

/* ── Dim layer ──
   Must live inside .edition-tile-wrap (overflow:hidden, same border-radius as img).
   The wrap clips it to exactly the image shape. */
.card-tile-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

/* The wrap must clip its children to the card's rounded corners */
.inv-card-tile .edition-tile-wrap,
.card-tile--authed .edition-tile-wrap {
    overflow: hidden;
    border-radius: 14px;
}

/* The img inside the wrap should not have its own border-radius
   since the wrap handles clipping — but we keep it for safety */

/* Trigger dim on hover */
.inv-card-tile:hover .card-tile-dim,
.card-tile--authed:hover .card-tile-dim {
    opacity: 1;
}

/* ═══════════════════════════════════════
   Shared hover vocabulary — .tile-hoverable/.tile-zoom/.tile-action-btn
   Every card-tile surface (Cards, Inventory, Decks GA, Prices watchlist/
   search, Drawer, the add-card search popup) adds these marker classes
   instead of redefining its own hover-zoom/dim-trigger/action-button CSS.
   .tile-hoverable goes on the element that already receives the page's
   :hover. .tile-zoom goes on whichever single element should scale — either
   .edition-tile-wrap directly, or a page's existing non-clipping ring
   wrapper for the surfaces that show a selection ring (put it there so an
   outward box-shadow ring doesn't get clipped by .edition-tile-wrap's own
   overflow:hidden). .tile-action-btn is the shared small centered "+"/"×"
   button; --danger swaps it to the red hover accent for destructive
   actions. Added additively alongside each page's own class names so
   existing JS selectors/event handlers keep working unchanged. ═══════════════════════════════════════ */
.tile-zoom {
    transition: transform 0.2s;
}

.tile-hoverable:hover .tile-zoom {
    transform: scale(1.03);
}

.tile-hoverable:hover .card-tile-dim {
    opacity: 1;
}

.tile-action-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s, filter 0.15s;
}

.tile-hoverable:hover .tile-action-btn {
    opacity: 1;
}

.tile-action-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.85);
    filter: brightness(1.15);
}

/* Deliberately larger glyph than the "+" buttons (1.3rem vs 1.1rem) so a
   "×" reads at the same visual weight — not a size to unify away. */
.tile-action-btn--danger {
    font-size: 1.3rem;
}

.tile-action-btn--danger:hover {
    background: var(--error);
    border-color: var(--error);
    filter: none;
}

/* ── card-tile--authed hover triggers ── */
.card-tile--authed:hover .inv-card-tile-overlay {
    opacity: 1;
}

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

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

.inv-card-tile-foil {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

/* ── Edit mode indicator triggers for card search tiles ── */
.card-tile.has-pending .inv-tile-qty-indicator {
    opacity: 1;
}

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