/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/merc_summary_module.css
 * WHY: portrait + name + level + XP-bar header at top of the left 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/merc_summary_module.css
 *
 * Maps to BB's character_screen_left_panel_header_module — portrait +
 * name + level + XP bar that sits at the top of the left column.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_left_panel/
 *     character_screen_left_panel_header_module.css
 *   ui/controls.css                 (.l-progressbar-container, xp bar styles)
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 *
 * Tactical-mode trim: the dismiss-character button (BB
 * left_panel_header_module.css L73-78 `.l-button.is-dismiss`) and every
 * popup-dialog rule (dismiss / change-name / level-up) only fire on the
 * world map. They are NOT ported here — see character_screen.txt §7. */

/* BB: ui/screens/character/modules/character_screen_left_panel/character_screen_left_panel_header_module.css */
/* BB: ui/controls.css */


/* Source: left_panel_header_module.css L12-20 — outer module container.
 * 100% wide x 9.0rem tall, floats inside the left column. */
.character-screen-container .left-panel-header-module
{
    width:    100%;
    height:    9.0rem;
    position: relative;
    float:    left;
}


/* Source: left_panel_header_module.css L22-32 — portrait container,
 * 9.0rem-square slot on the left side of the header. */
.character-screen-container .left-panel-header-module .portrait-container
{
    top:      0;
    left:     0;
    bottom:   0;
    width:    9.0rem;
    position: absolute;
}

/* Source: left_panel_header_module.css L34-52 — inner image container.
 * 15.0rem square, anchored at left:-2.5rem / top:-2.5rem so the portrait
 * overflows the 9.0rem slot. z-index:2 keeps the portrait above the name
 * label. */
.character-screen-container .left-panel-header-module .portrait-container .l-portrait-image-container
{
    left:    -2.5rem;
    right:    0;
    top:     -2.5rem;
    bottom:   0;
    width:   15.0rem;
    height:  15.0rem;

    position: absolute;
    margin:   auto;
    z-index:  2;
}

/* The portrait is composited client-side (portrait.js) into
 * a <canvas>; the canvas's pixel buffer is set in JS at canvas-natural
 * times the render-scale so the composite has hi-DPI crispness. CSS
 * sizes the display: full 15.0rem container, no upscale beyond. */
.character-screen-container .left-panel-header-module .portrait-container .portrait-canvas
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    100%;
    height:   100%;
    position: absolute;
    margin:   auto;
}


/* Source: left_panel_header_module.css L80-91 — name container. Sits to
 * the right of the portrait (left:9.0rem), spans the top 6.0rem of the
 * header, ellipses overflowing text. */
.character-screen-container .left-panel-header-module .name-container
{
    top:      0;
    left:     9.0rem;
    right:    0;
    height:    6.0rem;
    position: absolute;

    overflow: hidden;
}

/* Source: left_panel_header_module.css L100-115 — name label. Vertically
 * centred via translateY(-50%); ellipsis on overflow; centred horizontally. */
.character-screen-container .left-panel-header-module .name-container .label
{
    top:      50%;
    width:    100%;
    position: relative;

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

    white-space:   nowrap;
    text-align:    center;
    text-overflow: ellipsis;
    line-height:    2.6rem;
}


/* Source: left_panel_header_module.css L128-139 — level container.
 * 5.0rem x 3.0rem badge in the bottom-left of the name area. Sits below
 * the name container at top:6.0rem / left:9.0rem. */
.character-screen-container .left-panel-header-module .level-container
{
    top:      6.0rem;
    left:     9.0rem;
    width:    5.0rem;
    height:   3.0rem;
    position: absolute;

    overflow: hidden;
}

/* Source: left_panel_header_module.css L147-157 — level label fills the
 * badge, centred horizontally + vertically via line-height. */
.character-screen-container .left-panel-header-module .level-container > .label
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;

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


/* Source: left_panel_header_module.css L170-177 — xp bar container.
 * Sits to the right of the level badge (left:13.7rem) at the same
 * vertical position (top:6.0rem); fills the rest of the row width. */
.character-screen-container .left-panel-header-module .xp-container
{
    top:      6.0rem;
    left:    13.7rem;
    right:    0;
    height:   3.0rem;
    position: absolute;
}

/* Source: left_panel_header_module.css L179-189 — xp inner centre layer.
 * 19.6rem x 2.6rem, vertically + horizontally centred inside .xp-container. */
.character-screen-container .left-panel-header-module .l-xp-center-container
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:   19.6rem;
    height:   2.6rem;
    position: absolute;
    margin:   auto;
}


/* XP progressbar — BB createProgressbar(true, 'xp has-frame-xp') resolves
 * to `.ui-control.progressbar.xp.has-frame-xp` with a single fill child.
 * Source: ui/controls/progressbar.css L16-31 (.ui-control.progressbar
 * base), L40-45 (.has-frame-xp empty frame), L47-59 (.normal-bar fill
 * positioning), L66-81 (.label centering), L85-91 (.xp .normal-bar
 * orange fill sprite). */
.ui-control.progressbar
{
    width:    100%;
    height:   100%;
    position: relative;

    overflow: hidden;
    outline:  hidden;
}

.ui-control.progressbar.has-frame-xp
{
    background-image:  url("/bb/images/ui/inventory/inventory_bar_experience_empty.png");
    background-size:   19.6rem 2.6rem;
    background-repeat: no-repeat;
}

.ui-control.progressbar .normal-bar
{
    width:    100%;
    height:   100%;
    position: absolute;
    z-index:  1;
}

.ui-control.progressbar.xp .normal-bar
{
    background-image:  url("/bb/images/ui/inventory/inventory_bar_experience_fill.png");
    background-size:   19.6rem 2.6rem;
    background-repeat: no-repeat;
}

.ui-control.progressbar .label
{
    top:      50%;
    width:    100%;
    position: relative;
    z-index:  3;

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

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