/* Retinue tab (user 2026-06-15) — THIS PROJECT'S OWN styling. Battle Brothers has
 * no retinue screen on the character view, so there is NO BB source to port here
 * (unlike paperdoll/stash/perks, which cite BB CSS). The panel reuses the SAME inset
 * as the perks panel (top:3.5rem below the tab header, left/right/bottom pads) so it
 * occupies the right-panel rectangle identically; the tiles are a plain flex-wrap
 * grid. Colours/sizes are this app's own (no BB citation — bespoke screen).
 *
 * NOT copied from bng-game: bng-game has no such tab either; this is original. */

.character-screen-container .retinue-module
{
    top:      3.5rem;     /* same inset as .perks-module (below the tab header) */
    left:     1.0rem;
    right:    1.5rem;
    bottom:   4.0rem;
    position: absolute;

    overflow-y: auto;
    overflow-x: hidden;
}

.character-screen-container .retinue-module .retinue-intro
{
    padding:  1.0rem 1.4rem 0.6rem;
    color:    #d6c8a8;
}

.character-screen-container .retinue-module .retinue-count
{
    margin-bottom: 0.4rem;
    color:         #e2c87a;
}

.character-screen-container .retinue-module .retinue-hint
{
    line-height: 1.4;
    opacity:     0.8;
}

/* Tile grid — a fixed FOUR columns that always fill the full panel width
 * (user 2026-06-15: "fit four in one row, always fill the full row"); each
 * 1fr column stretches its tile, so rows are flush edge-to-edge. */
.character-screen-container .retinue-module .retinue-grid
{
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.0rem;
    padding:               1.0rem 1.4rem 1.4rem;
}

.character-screen-container .retinue-module .retinue-tile
{
    /* No fixed width — the 1fr grid column sets it, so the tile fills its cell. */
    cursor:      pointer;
    text-align:  center;
    padding:     0.6rem 0.4rem;
    border:      0.2rem solid transparent;
    border-radius: 0.4rem;
    background:  rgba(0, 0, 0, 0.20);
    transition:  border-color 0.1s, background 0.1s, opacity 0.1s;
}

.character-screen-container .retinue-module .retinue-tile:hover
{
    background:  rgba(0, 0, 0, 0.35);
    border-color: rgba(226, 200, 122, 0.4);
}

/* Selected = a current company member: gold frame + brighter background. */
.character-screen-container .retinue-module .retinue-tile.is-selected
{
    border-color: #e2c87a;
    background:   rgba(226, 200, 122, 0.14);
}

/* Cap reached: the unselected followers dim and stop responding. */
.character-screen-container .retinue-module .retinue-tile.is-disabled
{
    opacity: 0.35;
    cursor:  default;
}

.character-screen-container .retinue-module .retinue-tile.is-disabled:hover
{
    background:   rgba(0, 0, 0, 0.20);
    border-color: transparent;
}

.character-screen-container .retinue-module .retinue-portrait
{
    width:        9.0rem;
    height:       9.0rem;
    margin:       0 auto 0.5rem;
    display:      flex;
    align-items:  center;
    justify-content: center;
}

.character-screen-container .retinue-module .retinue-portrait img
{
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    /* BB's campfire portraits are colour by default; the unselected tiles read as
     * "available" via the dim/grey background, not a desaturated sprite. */
}

.character-screen-container .retinue-module .retinue-name
{
    color: #d6c8a8;
}

.character-screen-container .retinue-module .retinue-tile.is-selected .retinue-name
{
    color: #e2c87a;
}