/* ============================================================
 * Change-Stats dialog — the BB LEVEL-UP popup, repurposed to edit a
 * brother's eight ROLLED base attributes (user request 2026-06-15).
 *
 * PROVENANCE (README "EVERY line copied from bng-game must be documented"):
 * NOT copied from bng-game — bng-game has no level-up dialog (it is a combat
 * client). This is ported DIRECTLY from BB vanilla source, every value cited
 * inline below (README "BB UI PORT — cite or don't write").
 *
 * BB sources (under external/bb-vanilla-data/data_001/):
 *   ui/controls/popup_dialog.css                         (modal + frame)
 *   ui/controls/button.css                               (button-1 footer, button-8 +/-)
 *   ui/screens/character/modules/character_screen_left_panel/
 *     character_screen_left_panel_header_module.css L311-433  (levelup-popup)
 *   ui/controls/progressbar.css                          (the stat bars)
 *
 * ADAPTATIONS from BB (the feature differs from a one-shot level-up):
 *   - Each row's single "+N" button becomes a [-][+] pair (free up/down edit
 *     of the BASE value) — user decision 2026-06-15. The value shows in the
 *     progressbar label; talent stars are NOT rendered (user 2026-06-15).
 *   - BB centers the dialog with JS (centerPopupDialogWithinParent); we center
 *     it with flexbox on the modal background — same result, no JS.
 *
 * ASSET NOTE: popup_background_600x300.png and lvl_up_button_*.png exist in BB
 * source but are NOT in the shared bb-data image repo (which this workspace may
 * not edit), so they are vendored into this project's own static/levelup/ and
 * served from /static/levelup/ — exactly like static/resources/asset_*.png.
 * The footer button_01_* sprites ARE in bb-data (ui/buttons/), served via /bb/.
 * coui://gfx/... paths are rewritten accordingly.
 * ============================================================ */


/* --- left edit-actions (user 2026-06-15): the per-brother skill/stat edit
 * buttons moved OUT of the BB panel to the LEFT EDGE, so editable affordances ring
 * the BB screen (top = edit-bar, left = these, right = download box). Injuries +
 * Traits sit by the skills/passive box; Base Stats by the stat box below it. NOT
 * BB elements — our own, button-7 tab skin. They hug the left edge of the left
 * content column (left: negative, into the centred container's left margin). */
.character-screen-container .left-edit-actions,
.character-screen-container .left-top-actions
{
    position: absolute;
    left:     -11.5rem;        /* in the container's left margin, beside the panel */
    width:    11.0rem;
    z-index:  12;

    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}
/* Top group: Level Up aligned with the XP bar (header .xp-container top:6rem),
   Add Perk Point below it. */
.character-screen-container .left-top-actions  { top:  6.0rem; }
/* Lower group: stacked so the LAST button (Base Stats) lands at ~53rem, top-aligned
   with the stat box; Injuries + Traits sit directly above it. */
.character-screen-container .left-edit-actions { top: 47.4rem; }

.character-screen-container .left-edit-button.button-7
{
    width:    11.0rem;
    height:   2.4rem;
    position: relative;
    background-size: 11.0rem 2.4rem;
}
.character-screen-container .left-edit-button.button-7:hover,
.character-screen-container .left-edit-button.button-7.is-selected
{
    background-size: 11.0rem 2.4rem;
}
.character-screen-container .left-edit-button.button-7 > .label
{
    margin-top: 0.2rem;
}
/* (.edit-icon glyph spacing is one shared rule in editable.css.) */


/* --- modal background (BB popup_dialog.css L13-25) ------------------------
 * 30%-black full-screen overlay. BB appends the dialog and JS-centers it; we
 * flex-center instead. z-index above the character screen's own layers. */
.character-screen .ui-control.popup-dialog-dialog-modal-background
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    100%;
    height:   100%;
    position: absolute;
    z-index:  99999;

    background-color: rgba(0, 0, 0, 0.3);

    display:         flex;          /* centering — see header note */
    align-items:     center;
    justify-content: center;
}

/* Source: popup_dialog.css L42-50 + character_screen_left_panel_header_module
 * .css L311-319 (.levelup-popup) — the 60x30rem parchment popup frame. */
.character-screen .ui-control.popup-dialog
{
    overflow: hidden;
    /* Default text colour for EVERYTHING in a dialog: the readable parchment tone
     * (same as .confirm-content) so no text ever falls back to black on the brown
     * popup background. The brighter .font-color-title / .font-color-value golds are
     * more specific and still override where set. */
    color: #d6c7a8;
}

.character-screen .ui-control.popup-dialog.levelup-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;
}

/* Confirm dialog (Add Perk Point) — same parchment frame, smaller, centred
 * message (reuses the popup_dialog header/footer/button-1 chrome above). */
.character-screen .ui-control.popup-dialog.confirm-popup
{
    width:  52.0rem;
    height: 24.0rem;

    background-image:  url("/static/levelup/popup_background_600x300.png");
    background-size:   100% 100%;
    background-repeat: no-repeat;
}
.character-screen .ui-control.popup-dialog.confirm-popup > .content.confirm-content
{
    height:          12.0rem;
    padding:         0 4.0rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    color:           #d6c7a8;
    font-size:       1.6rem;
    line-height:     2.2rem;
}

.character-screen .ui-control.popup-dialog *
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Source: popup_dialog.css L59-70 + L114-136 — header band + centered title. */
.character-screen .ui-control.popup-dialog > .header
{
    width:    100%;
    height:   6.0rem;
    padding:  0.4rem;
    position: relative;

    overflow: hidden;
}

.character-screen .ui-control.popup-dialog > .header .text-container
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;
    margin:   auto;
    z-index:  2;
}

.character-screen .ui-control.popup-dialog > .header .title
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    height:   4.0rem;
    position: absolute;
    margin:   auto;

    text-align:  center;
    line-height: 4.0rem;
}

/* Source: ui/colors.css L39-43 — .font-color-title (gold dialog title). */
.character-screen .ui-control.popup-dialog .font-color-title
{
    color:       #dda21f;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5), -1px -1px #000;
}

/* Source: popup_dialog.css L162-169 — content band. */
.character-screen .ui-control.popup-dialog > .content
{
    width:    100%;
    position: relative;
}


/* --- the two-column stat grid (header_module.css L364-433) ---------------- */
.character-screen .ui-control.popup-dialog .levelup-container
{
    width:          100%;
    padding:        0.6rem;
    padding-left:   7.0rem;
    padding-right:  7.0rem;
    position:       relative;
}

.character-screen .ui-control.popup-dialog .levelup-container .column
{
    width:    22.4rem;
    position: relative;
    float:    left;
}

.character-screen .ui-control.popup-dialog .levelup-container .row
{
    width:    100%;
    height:   3.0rem;
    position: relative;
    float:    left;
}

/* Source: header_module.css L390-399 — the 2.6rem stat icon at left:1rem. */
.character-screen .ui-control.popup-dialog .levelup-container .row > img
{
    top:      0;
    left:     1.0rem;
    bottom:   0;
    width:    2.6rem;
    height:   2.6rem;
    position: absolute;
    margin:   auto;
}

/* Source: header_module.css L413-422 — progressbar slot (12.7rem at left:4rem). */
.character-screen .ui-control.popup-dialog .levelup-container .row > .l-progressbar-container
{
    top:      0;
    left:     4.0rem;
    bottom:   0;
    width:    12.7rem;
    height:   2.2rem;
    position: absolute;
    margin:   auto;
}

/* ADAPTATION of header_module.css L424-433 (.l-increase-button-container):
 * BB's single +N button slot (4.2rem at left:17.6rem) widened to hold the
 * [-][+] pair. 17.2 + 4.6 = 21.8rem < the 22.4rem column, so it still fits. */
.character-screen .ui-control.popup-dialog .levelup-container .row > .l-increase-button-container
{
    top:      0.1rem;
    left:     17.2rem;
    bottom:   0;
    width:    4.6rem;
    height:   2.8rem;
    position: absolute;
    margin:   auto;
}


/* --- progressbar (BB progressbar.css; same skins as the stats module) -----
 * Frame + per-stat fill, scoped to the dialog. Same BB sprites stats.css uses
 * (inventory_bar_*_127); duplicated here because the dialog bars live outside
 * .stats-module. The fill WIDTH is set inline by levelup.js as the value
 * changes (decorative — see resolve._base_stats dmax note). */
.character-screen .ui-control.popup-dialog .l-progressbar-container .ui-control.progressbar
{
    width:    100%;
    height:   100%;
    position: relative;
    overflow: hidden;
}

/* Source: progressbar.css L33-38 — empty-bar parchment frame. */
.character-screen .ui-control.popup-dialog .l-progressbar-container .ui-control.progressbar.has-frame
{
    background-image:  url("/bb/images/ui/inventory/inventory_bar_empty_127.png");
    background-size:   12.7rem 2.2rem;
    background-repeat: no-repeat;
}

/* Source: progressbar.css L47-59 — fill bar. */
.character-screen .ui-control.popup-dialog .l-progressbar-container .ui-control.progressbar .normal-bar
{
    width:    100%;
    height:   100%;
    position: absolute;
    z-index:  1;
}

/* Source: progressbar.css L66-81 — centered numeric label (the live value). */
.character-screen .ui-control.popup-dialog .l-progressbar-container .ui-control.progressbar .label
{
    top:      50%;
    width:    100%;
    position: relative;
    z-index:  3;

    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    white-space: nowrap;
    text-align:  center;
}

/* Per-stat fill colors — same sprites as stats.css (progressbar.css L101-239). */
.character-screen .ui-control.popup-dialog .progressbar.hitpoints .normal-bar
{ background-image: url("/bb/images/ui/inventory/inventory_bar_fill_health_127.png");
  background-size: 12.7rem 2.2rem; background-repeat: no-repeat; }
.character-screen .ui-control.popup-dialog .progressbar.fatigue .normal-bar
{ background-image: url("/bb/images/ui/inventory/inventory_bar_fill_fatigue_127.png");
  background-size: 12.7rem 2.2rem; background-repeat: no-repeat; }
.character-screen .ui-control.popup-dialog .progressbar.bravery .normal-bar,
.character-screen .ui-control.popup-dialog .progressbar.initiative .normal-bar,
.character-screen .ui-control.popup-dialog .progressbar.melee-skill .normal-bar,
.character-screen .ui-control.popup-dialog .progressbar.range-skill .normal-bar,
.character-screen .ui-control.popup-dialog .progressbar.melee-defense .normal-bar,
.character-screen .ui-control.popup-dialog .progressbar.range-defense .normal-bar
{ background-image: url("/bb/images/ui/inventory/inventory_bar_fill_neutral_127.png");
  background-size: 12.7rem 2.2rem; background-repeat: no-repeat; }


/* --- the [-] / [+] buttons (BB button-8 "Levelup", button.css L858-930) ---
 * Two per row inside the widened increase container. BB's button-8 sprite is
 * 4.2x2.8rem; here each button is ~2.15rem wide so two fit, so background-size
 * is scaled to match (keeps the BB lvl_up button skin, just narrower). */
.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8
{
    width:    2.15rem;
    height:   100%;
    float:    left;
    position: relative;

    background-image:  url("/static/levelup/lvl_up_button_default.png");
    background-size:   2.15rem 2.8rem;
    background-repeat: no-repeat;
    text-shadow:       1px 1px 1px #000;
    color:             #dda21f;
}

.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8.is-minus
{
    margin-right: 0.3rem;
}

.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8:hover,
.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8.is-selected
{
    background-image: url("/static/levelup/lvl_up_button_hovered.png");
    background-size:  2.15rem 2.8rem;
    color:            #f0b121;
}

.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8[disabled]
{
    color:            #a7a7a7;
    background-image: url("/static/levelup/lvl_up_button_inactive.png");
    background-size:  2.15rem 2.8rem;
}

/* Source: button.css L911-924 — button-8 label. */
.character-screen .ui-control.popup-dialog .l-increase-button-container .ui-control.button-8 > .label
{
    top:      -0.2rem;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;
    margin-top: 0.4rem;
    text-align: center;
    overflow: hidden;
}


/* --- footer OK / Cancel (popup_dialog.css L171-218; button-1, button.css L137-208) --- */
.character-screen .ui-control.popup-dialog > .footer
{
    width:    100%;
    height:   6.0rem;
    position: relative;
    float:    left;
}

.character-screen .ui-control.popup-dialog > .footer .l-button-bar
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    16.0rem;
    height:   4.3rem;
    position: absolute;
    margin:   auto;
}

/* Source: popup_dialog.css L193-196 — two buttons widen the bar to 34rem. */
.character-screen .ui-control.popup-dialog > .footer .l-button-bar.has-two-buttons
{
    width: 34.0rem;
}

/* Source: popup_dialog.css L198-217 — cancel left, ok right (17.5rem each). */
.character-screen .ui-control.popup-dialog > .footer .l-cancel-button
{
    top:      0;
    left:     0;
    bottom:   0;
    width:    17.5rem;
    position: absolute;
    line-height: 3.0rem;
}

.character-screen .ui-control.popup-dialog > .footer .l-ok-button
{
    top:      0;
    right:    0;
    bottom:   0;
    width:    17.5rem;
    position: absolute;
    line-height: 3.0rem;
}

/* Source: button.css L137-208 — button-1 (the standard dialog button skin).
 * button_01_* ARE in bb-data (ui/buttons/), so served via /bb/images. */
.character-screen .ui-control.popup-dialog .ui-control.button-1
{
    width:    100%;
    height:   100%;
    position: relative;

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

.character-screen .ui-control.popup-dialog .ui-control.button-1:hover,
.character-screen .ui-control.popup-dialog .ui-control.button-1.is-selected
{
    background-image: url("/bb/images/ui/buttons/button_01_hovered.png");
    background-size:  17.5rem 4.3rem;
}

.character-screen .ui-control.popup-dialog .ui-control.button-1 > .label
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;
    margin-top: 0.4rem;
    text-align: center;
    overflow: hidden;
}