/* Per-item Delete + Repair hover actions (user request 2026-06-25).
 * THIS PROJECT'S OWN UI — BB has no per-item delete button and its repair is a smith
 * service, so these are NOT BB-port visuals (no BB layout citation applies, like
 * .bb-editable-action). Two affordances modelled on existing pieces:
 *   - the DELETE × reuses the SAME red remove-cross treatment as the Injuries/Traits
 *     editor's .skill-chip-remove (skills.css L250-277) — the established "remove"
 *     affordance in this app.
 *   - the REPAIR icon is BB's OWN sprite repair_item.png (Asset.ICON_REPAIR_ITEM,
 *     external/bb-vanilla-data/data_001/ui/assets.js:145), the icon BB overlays on
 *     items needing repair (ui/controls/item.js:49-54 / paperdoll_item.js:66-69).
 *     bb-data/images carries only a curated icon subset (no repair_item.png) and this
 *     workspace may not add to bb-data, so the single sprite is copied into this
 *     project's static/ (the resource-icon precedent, moves.js RESOURCE_BAR) and
 *     served from /static; the URL is versioned via window.REPAIR_ICON (?v=...). */

/* The host item cell must be a positioning context for the absolute overlay. Safe to
 * add: the equip/bag .image-layer positions against the INNER .paperdoll-item
 * (paperdoll.css :219), not this container, and the stash slot's children are already
 * absolute/within — so relative-positioning the cell shifts nothing. */
.character-screen-container [data-zone="equip"],
.character-screen-container [data-zone="bag"],
.character-screen-container .inventory-list-module .ui-control.item.is-list-item
{
    position: relative;
}

/* The overlay: a top strip carrying the corner icons. Hidden until the cell is
 * hovered (like the injury cross, which appears on .skill-chip:hover). pointer-events
 * pass through the gap between icons so the item stays draggable from its middle. */
.character-screen-container [data-zone] > .item-actions
{
    top:      0.2rem;
    left:     0.2rem;
    right:    0.2rem;
    position: absolute;
    z-index:  30;

    display:        none;
    align-items:    flex-start;   /* top-align the two differently-sized icons */
    pointer-events: none;         /* only the icons capture clicks; the rest stays draggable */
}

.character-screen-container [data-zone]:hover > .item-actions
{
    display: flex;
}

/* One action icon — a 2.2rem square that captures its own clicks. Repair is always
 * on the LEFT (first child); Delete is pinned to the RIGHT with margin-left:auto so
 * it stays right even when the Repair icon is absent. */
.character-screen-container .item-actions .item-action
{
    width:    2.2rem;
    height:   2.2rem;
    cursor:   pointer;
    pointer-events: auto;
}

.character-screen-container .item-actions .item-delete
{
    margin-left: auto;   /* always right, with or without the Repair icon */
}

/* DELETE — the red round cross, same colours as skills.css .skill-chip-remove. */
.character-screen-container .item-actions .item-delete
{
    line-height:   2.0rem;
    text-align:    center;
    border-radius: 1.1rem;

    color:            #f4d9d3;
    background-color: #9c2b1e;   /* BB-style danger red (our own affordance) */
    font-size:        1.8rem;
}

.character-screen-container .item-actions .item-delete:hover
{
    background-color: #c0392b;
}

/* REPAIR — BB's repair_item.png, larger than the delete × (user 2026-06-25), on a
 * faint dark disc so it reads on any item art. Darkens on hover, like a clickable
 * affordance. Overrides the 2.2rem .item-action square (same specificity, later rule). */
.character-screen-container .item-actions .item-repair
{
    width:    3.4rem;
    height:   3.4rem;
    border-radius:    0.6rem;
    background-color: rgba(0, 0, 0, 0.55);
}

.character-screen-container .item-actions .item-repair img
{
    width:    3.0rem;
    height:   3.0rem;
    margin:   0.2rem;
    display:  block;
}

.character-screen-container .item-actions .item-repair:hover
{
    background-color: rgba(0, 0, 0, 0.8);
}