/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/formation_module.css
 * WHY: the 27-slot company formation strip at the bottom of the right column.
 * 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/formation_module.css
 *
 * Maps to BB's character_screen_brothers_list_module — the 27-slot
 * roster strip at the bottom of the right column (18 active formation
 * slots + 9 reserve slots) with a "X/12" roster-count badge in the
 * top-right corner.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_brothers_list/
 *     character_screen_brothers_list_module.css
 *   ui/controls/brother.css   (.ui-control.brother + .is-brother-slot rules)
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 *
 * Tactical-mode trim — see character_screen.txt §3.1:
 *   - Drag/drop reorder is NOT ported (formation locked at battle start).
 *   - Start Battle button is world-map only — see brothers_list_module.css
 *     L74-82 .l-start-battle-button. NOT included here.
 *   - Mood / daily-money-cost / lock overlays are world-map only — not
 *     ported here.
 *
 * `pointer-events: none` rules from BB brother.css are NOT ported (parent
 * README forbids them). They are visually inert in BB's read-only context
 * here anyway — the brother slot itself is the click target.
 */

/* BB: ui/screens/character/modules/character_screen_brothers_list/character_screen_brothers_list_module.css */
/* BB: ui/controls/brother.css */


/* --- outer module ----------------------------------------------------- */
/* Source: brothers_list_module.css L12-20 — .brothers-list-module.
 * Full-width strip below the right-panel-module (height 51.6rem); 1.2rem
 * top-margin breaks it off from the panel above. */
.character-screen-container .brothers-list-module
{
    width:    100%;
    height:  25.2rem;
    position: relative;
    float:    left;

    margin-top: 1.2rem;
}


/* --- list scroll container ------------------------------------------- */
/* Source: brothers_list_module.css L22-29 — .l-list-container. Fills the
 * module; 0.9rem left-pad accommodates the 0.4rem per-slot left margin
 * of the first column. */
.character-screen-container .brothers-list-module .l-list-container
{
    top:      0;
    left:     0.9rem;
    right:    0;
    bottom:   0;
    position: absolute;
}


/* --- roster-count badge (top-right corner) --------------------------- */
/* Source: brothers_list_module.css L37-47 — .roster-count-container.
 * 12.6rem x 2.4rem badge anchored 3.0rem above the strip and 4.0rem
 * past its right edge so it nestles into the parchment frame above. */
.character-screen-container .brothers-list-module .roster-count-container
{
    top:     -3.0rem;
    right:   -4.0rem;
    bottom:   0;
    width:   12.6rem;
    height:   2.4rem;
    position: absolute;

    z-index: 10;
}

/* Source: brothers_list_module.css L49-58 — .roster-count-container img
 * (the BB roster-icon, ICON_ASSET_BROTHERS = ui/icons/asset_brothers.png). */
.character-screen-container .brothers-list-module .roster-count-container img
{
    top:      0;
    left:     0;
    bottom:   0;
    width:    2.4rem;
    height:   2.4rem;
    position: absolute;
    margin:   auto;
}

/* Source: brothers_list_module.css L60-72 — .roster-count-container .label
 * (the "X/12" counter sits to the right of the icon). */
.character-screen-container .brothers-list-module .roster-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;
}


/* --- brother slot (background frame) --------------------------------- */
/* Source: brother.css L52-62 — .ui-control.is-brother-slot. 7.1rem x
 * 7.8rem cell; floats left so 18 of them wrap the 60-rem-wide strip
 * across multiple rows. */
.character-screen-container .brothers-list-module .ui-control.is-brother-slot
{
    width:    7.1rem;
    height:   7.8rem;
    float:    left;
    position: relative;

    margin-left: 0.4rem;
    margin-top:  0.4rem;
}

/* Source: brother.css L64-70 — empty active-formation slots show the
 * BB "inventory_figure" silhouette as background. */
.character-screen-container .brothers-list-module .ui-control.is-brother-slot.is-roster-slot
{
    background-image:    url("/bb/images/ui/inventory/inventory_figure.png");
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     6.8rem 7.8rem;
}

/* Source: brother.css L72-78 — empty reserve slots show the
 * BB "inventory_tent" silhouette instead of the figure. */
.character-screen-container .brothers-list-module .ui-control.is-brother-slot.is-reserve-slot
{
    background-image:    url("/bb/images/ui/inventory/inventory_tent.png");
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     7.1rem 7.7rem;
}

/* Source: brother.css L80-83 — once a slot has a brother in it, the
 * silhouette is hidden so the brother portrait sits on the bare slot. */
.character-screen-container .brothers-list-module .ui-control.is-brother-slot.is-blocked-slot
{
    background-image: none;
}


/* --- list-brother control (the brother portrait DIV) ----------------- */
/* Source: brother.css L15-22 — base .ui-control.brother. CRITICAL:
 * `overflow: visible`. BB's portrait image is scaled to 0.66 × the
 * procedural-image natural size (~130×140 BB-px), which yields
 * ~85.8×92.4 BB-px on screen — LARGER than the 7.1×7.8rem cell. The
 * design intends the figure to protrude from the cell on every side
 * (centerImageWithinParent applies negative margins; see image.js
 * L89-126). Without `overflow: visible` here, the protrusion is
 * clipped and the merc looks shrunken-into-cell. */
.character-screen-container .brothers-list-module .ui-control.brother
{
    width:    100%;
    height:   100%;
    position: relative;

    overflow: visible;
}

/* Source: brother.css L24-34 — .ui-control.brother.is-list-brother.
 * Same 7.1rem x 7.8rem footprint as the slot; sits inside its slot
 * parent and floats left. */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother
{
    width:    7.1rem;
    height:   7.8rem;
    float:    left;
    position: relative;
}

/* Source: brother.css L100-107 — selection highlight layer is anchored
 * 1.0rem above and 1.2rem left of the slot so the highlight sprite
 * extends past the slot's edges (the highlight png is larger than the
 * slot, mimicking BB's emphasis ring around the selected brother). */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother .highlight-layer
{
    opacity: 0;

    position: absolute;
    top:     -1.0rem;
    left:    -1.2rem;
}

/* Source: brother.css L109-112 — .is-selected toggles the highlight on. */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother.is-selected .highlight-layer
{
    opacity: 1;
}

/* Source: brother.css L114-126 — .image-layer is the portrait surface,
 * full-cell, z-index 1 below the highlight (z-index unset in BB but the
 * highlight-layer sits above by DOM order; we mirror that). The BB
 * `pointer-events: none` rule is intentionally NOT ported (forbidden
 * by parent README). */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother > .image-layer
{
    width:    100%;
    height:   100%;
    padding:  0;
    position: absolute;

    bottom:   0;
    left:     0;
    z-index:  1;
}

/* Portrait canvas — BB renders the procedural merc image into the
 * .image-layer via:
 *   image.centerImageWithinParent(_imageOffsetX, _imageOffsetY, 0.66, false)
 * (brothers_list_module.js L251 + brother.js L139, with
 * imageOffsetX=imageOffsetY=0 from L248-249). With _fitImage=false,
 * image.js L97-123 evaluates to:
 *   newWidth  = naturalWidth  × 0.66    (= 130 × 0.66 ≈ 85.8 BB-px ≈ 8.58rem)
 *   newHeight = naturalHeight × 0.66    (= 140 × 0.66 ≈ 92.4 BB-px ≈ 9.24rem)
 *   marginLeft = (parent.innerWidth  - newWidth)  / 2   (= -7.4 BB-px → image overflows ~7px each side)
 *   marginTop  = (parent.innerHeight - newHeight) / 2   (= -7.2 BB-px → image overflows ~7px top/bottom)
 *
 * The 130×140 BB-px natural box matches the bottombar turn-strip
 * canvas (turn_sequence_module.js L32-33: CANVAS_NATURAL_W=130,
 * CANVAS_NATURAL_H=140) — the same composited merc fed in here, so
 * the same natural box is correct. The bottombar displays its canvas
 * at 9.1×9.8rem (= 130×140 × 0.7 inactive scale, turn_sequence_module.css
 * L130-131); we use the BB-cited 0.66 instead.
 *
 * Centred horizontally + vertically inside the .image-layer parent
 * via the standard 50%/50% + translate(-50%,-50%) idiom — equivalent
 * to BB's centerImageWithinParent margin math, but resilient to root
 * font-size variation. */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother > .image-layer .portrait-canvas
{
    width:     8.58rem;       /* 130 BB-px × 0.66 */
    height:    9.24rem;       /* 140 BB-px × 0.66 */
    position:  absolute;
    left:      50%;
    top:       50%;
    transform: translate(-50%, -50%);
}


/* --- click-target cursor --------------------------------------------- */
/* Click on a filled brother slot navigates to /inventory/<n+1>. BB
 * brother.css does not specify a cursor (BB's coherent UI handles that
 * via SQ data binding); for the web port we explicitly mark the slot
 * clickable so the cursor reflects it. */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother
{
    cursor: pointer;
}


/* --- lock layer ------------------------------------------------------ */
/* Source: brother.css L141-150 — .lock-layer wraps the padlock icon;
 * full-cell, z-index 2. pointer-events: none so the brother slot's
 * click handler underneath still fires (user authorised the BB-faithful
 * rule on 2026-05-27 for this layer). */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother > .lock-layer
{
    width:    100%;
    height:   100%;
    position: absolute;
    padding:  0.4rem;
    z-index:  2;

    pointer-events: none;
}

/* Source: brother.css L152-161 — padlock <img>, 2.0rem x 2.52rem,
 * pinned top-right (right: -0.4rem to compensate for the layer's
 * 0.4rem padding so the icon sits flush at the slot edge). */
.character-screen-container .brothers-list-module .ui-control.brother.is-list-brother > .lock-layer img
{
    right:    -0.4rem;
    top:      0.3rem;
    width:    2.0rem;
    height:   2.52rem;
    position: absolute;

    pointer-events: none;
}