/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/inventory_list_module.css
 * WHY: the item grid (stash/bag) shown under the Stash tab.
 * NOT copied: that module's JS — this project renders the same DOM
 *   server-side (Jinja), so no bng-game JS runs here.
 * bng-game's own header + its BB-source citations are kept below.
 * ============================================================ */

/*
 * bng-game/webapp/inventory/modules/inventory_list_module.css
 *
 * Maps to BB's character_screen_inventory_list_module — the Ground
 * panel that lists items at the active merc's tile. Two regions:
 *
 *   ┌── l-list-container ────────────────────────────────────────┐
 *   │  scrollable item grid                                       │
 *   ├── slot-count-panel (bottom: 0, height 3.4rem) ─────────────┤
 *   │            [bag icon]  [count label]                       │
 *   └────────────────────────────────────────────────────────────┘
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_right_panel/
 *     character_screen_inventory_list_module.css
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 *
 * Sort + filter buttons (BB L78-156) and the mood-filter button
 * (.is-mood-filter, BB L149-152) are world-map chrome — bng-game
 * has no world map, so none of them are rendered.
 */

/* BB: ui/screens/character/modules/character_screen_right_panel/character_screen_inventory_list_module.css */
/* BB: ui/controls/item.css */
/* BB: ui/controls/button.css */


/* Source: inventory_list_module.css L12-21 — outer panel inset 4.3rem
 * from the right-panel-module top (clearing the header bar). */
.character-screen-container .inventory-list-module
{
    top:      4.3rem;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;
}


/* --- List container (scrollable grid) -------------------------------- */
/* Source: inventory_list_module.css L23-37 — list grid takes the
 * vertical space between the panel top and the slot-count footer.
 * The 44.4rem fixed height is BB-original; combined with top: 0 /
 * bottom: 3.4rem inside a parent that is 51.6rem - 4.3rem = 47.3rem
 * tall, it leaves 47.3 - 3.4 = 43.9rem ≈ 44.4rem (the BB explicit
 * height accommodates the filter panel overlap that BB has but we
 * don't render). */
.character-screen-container .inventory-list-module .l-list-container
{
    top:      0;
    left:     0.5rem;
    right:    0;
    bottom:   3.4rem;
    position: absolute;
    margin-right: 0.2rem;

    height:   44.4rem;

    /* BB: ui/controls/list.css L27 — `.ui-control.list { overflow: auto }`.
     * In BB the scrollable element is the `.ui-control.list` that createList
     * builds INSIDE .l-list-container; we don't port createList, so the
     * l-list-container itself plays that role. With the 44.4rem fixed height
     * above, the item grid scrolls here instead of spilling past the footer
     * onto the formation strip below. */
    overflow-y: auto;
    overflow-x: hidden;
}

/* BB: ui/controls/list.css L38-42 — `.ui-control.list .scroll-container
 * { width: 100%; float: left }`. The float makes the overflow-y:auto parent
 * establish a block-formatting context that CONTAINS the floated item slots
 * (item.css L43 `.is-list-item { float: left }`), so they wrap into a grid
 * and the parent scrolls once they exceed its height. */
.character-screen-container .inventory-list-module .l-list-container .scroll-container
{
    width: 100%;
    float: left;
}


/* --- Item slot (BB list-item control) -------------------------------- */
/* Source: ui/controls/item.css L34-52 — `.ui-control.item.is-list-item`.
 * 7.4×7.4rem parchment slot, float-left so multiple slots flow into a
 * grid. The empty-state visual is just the slot background; assigned
 * items overlay an .image-layer on top. */
.character-screen-container .inventory-list-module .ui-control.item.is-list-item
{
    width:    7.4rem;
    height:   7.4rem;
    float:    left;

    background-image:  url("/bb/images/ui/inventory/inventory_slot.png");
    background-size:   7.4rem 7.4rem;
    background-repeat: no-repeat;
}


/* --- Slot-count panel (footer) --------------------------------------- */
/* Source: inventory_list_module.css L51-98 — bottom-anchored 3.4rem
 * strip with a small bag icon + count label centred-ish to the right. */
.character-screen-container .inventory-list-module .slot-count-panel
{
    left:     0;
    right:    0;
    bottom:   0;
    height:   3.4rem;
    width:    100%;
    position: absolute;
    z-index:  10;
}

.character-screen-container .inventory-list-module .slot-count-panel .slot-count-container
{
    top:      2.2rem;
    right:    5.0rem;
    bottom:   0;
    width:    12.6rem;
    height:   2.4rem;
    position: absolute;
    margin:   auto;
}

.character-screen-container .inventory-list-module .slot-count-panel .slot-count-container img
{
    top:      0;
    left:     0;
    bottom:   0;
    width:    2.4rem;
    height:   2.4rem;
    position: absolute;
    margin:   auto;
}

.character-screen-container .inventory-list-module .slot-count-panel .slot-count-container .label
{
    top:      0;
    left:     2.6rem;
    bottom:   0;
    width:    10.0rem;
    height:   2.0rem;
    position: absolute;
    margin:   auto;

    line-height: 2.0rem;
    text-align:  left;
}


/* --- Filter / sort strip --------------------------------------------- */
/* The world-map inventory footer carries a sort button + the All / Weapons
 * / Armor / Usable / Misc filter buttons (BB inventory_list_module.js
 * _createDIV L76-155, appended into the slot-count-panel). bng-game omitted
 * these (no world map); this project IS the world-map inventory, so they are
 * ported here. The mood-filter button (BB L149-152, left: 30rem) is NOT
 * rendered: it toggles live brother-mood visibility (a running-game concern)
 * and its filter_mood.png is absent from bb-data. */

/* BB: ui/screens/character/modules/character_screen_right_panel/character_screen_inventory_list_module.css L102-148 */
.character-screen-container .inventory-list-module .filter-panel
{
    position: absolute;
    left:     2.0rem;
    top:      0.8rem;
    z-index:  10;
}

.character-screen-container .inventory-list-module .filter-panel .l-button
{
    width:    5.2rem;
    height:   4.1rem;
    position: absolute;
    line-height: 2.6rem;
}

/* BB L119-147 — button left offsets (sort 0, all 5, weapons 10, armor 15,
 * usable 20, misc 25; mood 30 omitted). */
.character-screen-container .inventory-list-module .filter-panel .l-button.is-all-filter     { left:  5.0rem; }
.character-screen-container .inventory-list-module .filter-panel .l-button.is-weapons-filter  { left: 10.0rem; }
.character-screen-container .inventory-list-module .filter-panel .l-button.is-armor-filter    { left: 15.0rem; }
.character-screen-container .inventory-list-module .filter-panel .l-button.is-usable-filter   { left: 20.0rem; }
.character-screen-container .inventory-list-module .filter-panel .l-button.is-misc-filter     { left: 25.0rem; }

/* --- BB image button (button-3) --------------------------------------- */
/* Source: ui/controls/button.css L340-424 (.ui-control.button-3) — the
 * 5.2×4.1rem parchment image-button skin used for the sort + filter icons.
 * createImageButton(path, fn, '', 3) builds `<div class="button-3"><img></div>`
 * (button.js L255-274). is-active uses the hovered skin (button.css L365).
 * coui://gfx/ui/skin/button_03_*.png rewritten to the bb-data path
 * /bb/images/ui/buttons/button_03_*.png (that is where bb-data extracted
 * them; BB's own CSS points at ui/skin/). */
/* BB: ui/controls/button.css L340-424 */
.character-screen-container .ui-control.button-3
{
    width:    100%;
    height:   100%;
    position: relative;
    cursor:   pointer;

    background-image:  url("/bb/images/ui/buttons/button_03_default.png");
    background-size:   5.2rem 4.1rem;
    background-repeat: no-repeat;
    color:        #dda21f;
    text-shadow:  1px 1px 1px #000;
}

.character-screen-container .ui-control.button-3:hover,
.character-screen-container .ui-control.button-3.is-active
{
    background-image: url("/bb/images/ui/buttons/button_03_hovered.png");
}

/* button.css L414-424 — icon centred at 60% of the button. */
.character-screen-container .ui-control.button-3 > img
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    60%;
    height:   60%;
    position: absolute;
    margin:   auto;
}