/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/perks_module.css
 * WHY: the 7-tier perk tree + the .right-panel-module wrapper.
 * 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/perks_module.css
 *
 * Maps to BB's character_screen_perks_module — 7 rows × ~9 perks per row,
 * one row per leveling tier, with row opacity gated by perk-points-spent
 * and a per-perk selection frame on unlocked perks.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_right_panel/
 *     character_screen_perks_module.css
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 *
 * Tactical-mode trim — see character_screen.txt §3.7:
 *   - Unlock-perk popup dialog (.ui-control.popup-dialog.unlock-perk-popup
 *     and .unlock-perk-popup-dialog-content-container — perks_module.css
 *     L111-179) is NOT ported here. v1 is read-only; clicking a perk does
 *     nothing. Once perk-spend lands these rules can be added straight
 *     from BB.
 *   - Hover preview frame on unlocked-but-not-yet-purchased perks
 *     (controlled by .selection-image-layer toggling in BB's
 *     attachEventHandler) is also deferred — depends on
 *     `isPerkUnlockable` which depends on perk-spend.
 */

/* BB: ui/screens/character/modules/character_screen_right_panel/character_screen_perks_module.css */


/* Source: perks_module.css L13-24 — .perks-module. Absolute inset
 * inside the right-panel-module: top:3.5rem (below the tab header),
 * left:1.0rem / right:1.5rem (pad against the parchment frame),
 * bottom:4.0rem (above the formation strip). overflow:hidden hides
 * the row paint outside this rectangle. */
.character-screen-container .perks-module
{
    top:      3.5rem;
    left:     1.0rem;
    right:    1.5rem;
    bottom:   4.0rem;
    position: absolute;

    overflow: hidden;
}


/* Source: perks_module.css L26-40 — .column. Single-column layout
 * (BB has only mLeftColumn). top:2.0rem / left:1.0rem inside the
 * .perks-module rect; the row stack starts here. */
.character-screen-container .perks-module .column
{
    top:    2.0rem;
    bottom: 1.0rem;
    left:   1.0rem;
    right:  0.0rem;

    width:   100%;
    height:  100%;
    position: absolute;
}


/* Source: perks_module.css L42-51 — .row.
 * 5.0rem-tall horizontal row. Position is set inline by the JS
 * (top: row * 6.0rem) — see perks_module.js createPerkTreeDIV
 * L59. */
.character-screen-container .perks-module .column .row
{
    width:    100%;
    height:   5.0rem;
    position: absolute;
}


/* Source: perks_module.css L53-61 — .center.
 * Holds the row's perk-containers; positioned absolute so the JS
 * can centre it horizontally inside the row (see perks_module.js
 * L84-85: width = 5.0rem * count, left = (660 - width)/2 in px). */
.character-screen-container .perks-module .column .row .center
{
    position: absolute;

    margin:   auto;
    display:  block;
}


/* Row tint by perk-points-spent — perks_module.css L63-72.
 * Rows the brother has reached (row N for perkPointsSpent >= N) are
 * full opacity; rows beyond their spend ceiling are 0.33 (greyed but
 * still visible). The JS toggles these classes on the row dom. */
.character-screen-container .perks-module .is-unlocked
{
    opacity: 1;
}

.character-screen-container .perks-module .is-locked
{
    opacity: 0.33;
}


/* Source: perks_module.css L75-81 — .l-perk-container.
 * 5.0rem-square cell, floats left so containers stack horizontally
 * inside .center. */
.character-screen-container .perks-module .row .l-perk-container
{
    width:    5.0rem;
    height:   5.0rem;
    position: relative;
    float:    left;
}

/* Source: perks_module.css L83-95 — .selection-image-layer.
 * 4.7rem square, z-index 1 (under the perk icon). Centred via
 * margin:auto. The JS toggles display-none / display-block on it
 * based on whether the perk is .Unlocked. */
.character-screen-container .perks-module .l-perk-container .selection-image-layer
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    4.7rem;
    height:   4.7rem;
    position: absolute;
    margin:   auto;
    padding-bottom: 0.1rem;
    z-index:  1;
}

/* Source: perks_module.css L97-108 — .perk-image-layer.
 * 4.5rem square, z-index 2 (sits over the selection frame). The JS
 * sets img.src to perk.Icon (colored) when unlocked, perk.IconDisabled
 * (greyscale) when locked. */
.character-screen-container .perks-module .l-perk-container .perk-image-layer
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    4.5rem;
    height:   4.5rem;
    position: absolute;
    margin:   auto;
    z-index:  2;
}


/* --- right-panel-module wrapper ------------------------------------- */
/* Source: ui/screens/character/modules/character_screen_right_panel/
 *   character_screen_right_panel_module.css L13-19 — .right-panel-module.
 * 100% wide x 51.6rem tall, floats left inside .l-right-content-container.
 * This wrapper is what pushes the brothers-list-module (formation strip)
 * down to the bottom of the right column — without it, the formation
 * floats to the top of the empty right column.
 *
 * Lives in perks_module.css for now because the perks tab is the first
 * right-panel module to land. Once the right-panel-header / inventory-list
 * modules ship, this rule should move into a shared right-panel CSS
 * (mirroring BB's split). */
.character-screen-container .right-panel-module
{
    width:    100%;
    height:  51.6rem;
    position: relative;
    float:    left;
}


/* --- perk editing (this project's add/remove feature, perk.js) ------- */
/* An ownable / removable perk shows the pointer cursor (owned = removable,
 * unowned+unlockable = pickable). perk.js toggles .is-pickable. */
.character-screen-container .perks-module .l-perk-container.is-pickable
{
    cursor: pointer;
}

/* "Unlock Perk" / "Remove Perk" confirm popup — same parchment chrome as the
 * level-up / confirm popups (levelup.css .popup-dialog), BB-sized 60x30rem.
 * BB: ui/screens/character/modules/character_screen_right_panel/
 *     character_screen_perks_module.css L112-120 (.unlock-perk-popup). */
.character-screen .ui-control.popup-dialog.unlock-perk-popup
{
    width:  60.0rem;
    height: 30.0rem;

    background-image:  url("/static/levelup/popup_background_600x300.png");
    background-size:   60.0rem 30.0rem;
    background-repeat: no-repeat;
}
/* BB: character_screen_perks_module.css L122-138 — content container (icon on
 * the left, name + description on the right). */
.character-screen .ui-control.popup-dialog.unlock-perk-popup .unlock-perk-popup-dialog-content-container
{
    top:           -2.0rem;
    width:          100%;
    height:         17.7rem;
    padding-left:   2.0rem;
    padding-right:  2.0rem;
    position:       relative;
    float:          left;
}
/* BB: character_screen_perks_module.css L140-147 — .left-column (perk icon). */
.character-screen .ui-control.popup-dialog.unlock-perk-popup .left-column
{
    width:    6.0rem;
    height:   4.0rem;
    position: relative;
    float:    left;
}
.character-screen .ui-control.popup-dialog.unlock-perk-popup .left-column img
{
    width:  4.5rem;   /* BB perk icon (perks_module.css .perk-image-layer 4.5rem) */
    height: 4.5rem;
}
/* BB: character_screen_perks_module.css L149-158 — .right-column (name + desc). */
.character-screen .ui-control.popup-dialog.unlock-perk-popup .right-column
{
    position:       relative;
    float:          none;
    padding-right:  1.0rem;
    overflow:       hidden;
}
/* BB: character_screen_perks_module.css L160-167 — .right-column .name. */
.character-screen .ui-control.popup-dialog.unlock-perk-popup .right-column .name
{
    width:       100%;
    height:      3.6rem;
    position:    relative;
    float:       left;
    line-height: 4.4rem;
}
/* BB: character_screen_perks_module.css L169-179 — .right-column .description.
 * white-space: pre-line keeps the editor's trailing refund sentence (perk.js
 * joins it with a blank line) on its own line. */
.character-screen .ui-control.popup-dialog.unlock-perk-popup .right-column .description
{
    width:       100%;
    position:    relative;
    float:       left;
    white-space: pre-line;
    /* Canonical dialog body text size (1.6rem / 2.2rem) — same as every other
     * popup dialog (progression.css .additional-pp-info documents it). */
    font-size:   1.6rem;
    line-height: 2.2rem;
    /* font-color-description is not defined in this project's CSS, so the text fell
     * back to black on the brown parchment — use the same parchment body colour as
     * the other dialog text (levelup.css .confirm-content). */
    color:       #d6c7a8;
}