/* ============================================================
 * 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/N" roster-count badge in the
 * top-right corner (N = the per-origin deploy cap: 16 for Peasant
 * Militia / Manhunters, else 12; resolve._roster_cap).
 *
 * 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/N" 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;
}

/* Cap-full flash (user 2026-07-09) — THIS PROJECT'S OWN affordance (no BB port).
 * formation.js adds .is-full-flash to the badge when a reserve->active drop is
 * refused for exceeding the per-origin deploy cap; pulse the count red (BB's
 * over-limit #c90000) + a slight scale so the block reads. `color` lives only on
 * the mid keyframes, so it returns to the label's own font-color-value when the
 * one-shot animation ends (animation-fill-mode none). */
.character-screen-container .brothers-list-module .roster-count-container.is-full-flash .label
{
    animation: roster-full-flash 0.85s ease;
}
@keyframes roster-full-flash
{
    0%, 100%  { transform: scale(1); }
    25%       { transform: scale(1.2); }
    20%, 60%  { color: #c90000; }
}


/* --- 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;
}

/* ============================================================
 * THIS PROJECT'S OWN addition (formation drag editor - formation.js;
 * bng-game has no formation drag, so there is nothing to copy from it).
 * Ported straight from BB: while a brother is dragged he gets .is-dragged
 * and his portrait dims to 60%, and the drop-target slot shows NOTHING
 * (BB's is-active-slot target highlight is commented out in
 * character_screen_brothers_list_module.js L156-164). So we match BB by
 * dimming the dragged brother and NOT outlining the target slot.
 * ============================================================ */

/* BB: ui/controls/brother.css L128-131 - .ui-control.brother.is-dragged
 * > .image-layer, the dragged portrait at 60% opacity. */
.character-screen-container .brothers-list-module .ui-control.brother.is-dragged > .image-layer
{
    opacity: 0.6;
}

/* ============================================================
 * COPIED from bng-game: client/inventory/modules/formation_module.css
 *   (the asset-layer / status-badge rules added there 2026-07-04).
 * WHY: the formation slots show BB's status badge icons - up to 3
 *   temporary-injury icons + the days-wounded icon along the slot's
 *   bottom edge, and the leveled-up arrow at the right edge (user
 *   2026-07-04, match BB). Same BB citations as bng-game's copy.
 * ============================================================ */

/* BB: ui/controls/brother.css L224-230 - .asset-layer, the full-cell
 * overlay above the image layer that holds the badge-icon containers.
 * BB sets no pointer-events here: the badge <img>s take hover for
 * their tooltips, and clicks bubble to the slot's <a>. */
.character-screen-container .brothers-list-module .ui-control.brother > .asset-layer
{
    width:    100%;
    height:   100%;
    position: absolute;
    z-index:  4;
}

/* BB: ui/controls/brother.css L267-276 - .primary-status-container,
 * the leveled-up-arrow slot at the cell's right edge. */
.character-screen-container .brothers-list-module .ui-control.brother > .asset-layer .primary-status-container
{
    width:    10.0rem;
    height:    3.0rem;
    position: absolute;
    float:    left;
    margin-top:  2.8rem;
    margin-left: 5.9rem;
}

/* BB: ui/controls/brother.css L278-285 - primary-status icons are 2.0rem. */
.character-screen-container .brothers-list-module .ui-control.brother > .asset-layer .primary-status-container img
{
    width:    2.0rem;
    height:   2.0rem;
    float:    left;
    display:  block;
    position: relative;
}

/* BB: ui/controls/brother.css L287-295 - .status-container, the injury +
 * days-wounded icon row along the slot's bottom edge (margin-top 5.8rem
 * of the 7.8rem cell). Wider than the cell; BB lets it spill right
 * (overflow: visible on .brother). */
.character-screen-container .brothers-list-module .ui-control.brother > .asset-layer .status-container
{
    width:    10.0rem;
    height:    3.0rem;
    position: relative;
    float:    left;
    margin-top:  5.8rem;
    margin-left: 0.4rem;
}

/* BB: ui/controls/brother.css L297-304 - status icons are 2.5rem, tucked
 * -0.2rem into each other. */
.character-screen-container .brothers-list-module .ui-control.brother > .asset-layer .status-container img
{
    width:   2.5rem;
    height:  2.5rem;
    float:   left;
    display: block;
    margin-left: -0.2rem;
}