/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/right_panel_header_module.css
 * WHY: the Stash/Perks tab bar at the top of the right panel.
 * 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/right_panel_header_module.css
 *
 * Maps to BB's character_screen_right_panel_header_module — the bar at
 * the top of the right panel with two tab buttons (Ground / Perks in
 * tactical, Stash / Perks on the world map) and a close X.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_right_panel/
 *     character_screen_right_panel_header_module.css
 *   ui/controls/button.css   (.button-7 tab style, .button-6 HUD)
 *   ui/controls.css          (.ui-control-tab-button — alt selectors;
 *                             unused here, BB tabs go through button-7)
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 */

/* BB: ui/screens/character/modules/character_screen_right_panel/character_screen_right_panel_header_module.css */
/* BB: ui/controls/button.css */
/* BB: ui/controls.css */


/* Source: right_panel_header_module.css L12-21 — outer header bar
 * pinned to the top of the right-panel-module, 3.5rem tall. */
.character-screen-container .right-panel-header-module
{
    top:      0;
    left:     0;
    right:    0;
    height:   3.5rem;
    position: absolute;
}

/* Source: right_panel_header_module.css L23-30 — three button
 * containers sitting on the same baseline (top: 0.8rem, height
 * 4.3rem so the button-7 frame extends below the header rect into
 * the panel content area — BB's intended visual). */
.character-screen-container .right-panel-header-module .buttons-container
{
    top:      0.8rem;
    bottom:   0;
    height:   4.3rem;
    position: absolute;
    margin:   auto;
}

/* Source: right_panel_header_module.css L32-49 — three column slots:
 * left (currently empty in BB; reserved for future search button —
 * see L52-78 of the .js commented-out section), middle (tab pair),
 * right (close X). The 200rem `is-middle` width is BB-original — it's
 * deliberately oversized because the tab buttons inside use absolute
 * left positioning, not flow layout, so the container width doesn't
 * affect their placement. */
.character-screen-container .right-panel-header-module .buttons-container.is-left
{
    left:  1.0rem;
    width: 0.0rem;
}

.character-screen-container .right-panel-header-module .buttons-container.is-middle
{
    left:  16.0rem;
    right: 0;
    width: 200.0rem;
}

.character-screen-container .right-panel-header-module .buttons-container.is-right
{
    right: 1.0rem;
    width: 2.8rem;
}

/* Source: right_panel_header_module.css L51-58 — each .l-button
 * absolute-positioned slot is 17.4×4.3rem (matches the button-7
 * background-size in button.css L763). */
.character-screen-container .right-panel-header-module .buttons-container .l-button
{
    width:    17.4rem;
    height:   4.3rem;
    position: absolute;
    line-height: 3.0rem;
}

/* Source: right_panel_header_module.css L86-89 — Stash/Ground tab
 * is the leftmost (left: 0). */
.character-screen-container .right-panel-header-module .buttons-container .l-button.is-inventory
{
    left: 0;
}

/* Source: right_panel_header_module.css L91-94 — Perks tab to the
 * right of the inventory tab (gap = 17.0rem - 17.4rem = the BB
 * intentional ~0.4rem overlap of the parchment-background frame). */
.character-screen-container .right-panel-header-module .buttons-container .l-button.is-perks
{
    left: 17.0rem;
}

/* Source: right_panel_header_module.css L96-102 — close X is the
 * 4.5×4.1rem HUD button, anchored at the right edge of the bar. */
.character-screen-container .right-panel-header-module .buttons-container .l-button.is-close
{
    right:  0;
    top:    0.2rem;
    width:  4.5rem;
    height: 4.1rem;
}


/* (The perk-point editor moved OUT of this tab header into the shared edit-bar —
 * user 2026-06-15; styled in resources.css .edit-bar .perk-point-box.) */


/* --- BB tab button (button-7) ----------------------------------------- */
/* Source: ui/controls/button.css L756-829 (.ui-control.button-7) — the
 * BB tab-button skin used for Inventory/Stash/Ground/Perks. Plain default
 * + hover/selected. Inactive (disabled) state is also defined here in
 * case future code disables a tab. */

.character-screen-container .ui-control.button-7
{
    width:    100%;
    height:   100%;
    position: relative;
    cursor:   pointer;

    background-image:  url("/bb/images/ui/buttons/button_tab_default.png");
    background-size:   17.4rem 4.3rem;
    background-repeat: no-repeat;

    color:        #dda21f;
    text-shadow:  1px 1px 1px #000;
    border:       0;
    padding:      0;
}

.character-screen-container .ui-control.button-7:hover,
.character-screen-container .ui-control.button-7.is-selected
{
    background-image: url("/bb/images/ui/buttons/button_tab_hovered.png");
    color:            #f0b121;
}

.character-screen-container .ui-control.button-7[disabled]
{
    color:            #a7a7a7;
    background-image: url("/bb/images/ui/buttons/button_tab_inactive.png");
    cursor:           default;
}

/* Source: button.css L809-822 — label centred horizontally, nudged
 * down 0.4rem to sit on the parchment-button artwork's text strip. */
.character-screen-container .ui-control.button-7 > .label
{
    top:    0;
    bottom: 0;
    left:   0;
    right:  0;
    position: absolute;

    margin-top:  0.4rem;
    text-align:  center;

    overflow: hidden;
}

/* Source: button.css L824-828 — selected state nudges the label
 * 0/0 (i.e. removes the default 0.4rem margin) so it appears
 * pressed in. */
.character-screen-container .ui-control.button-7.is-selected > .label
{
    top:  0;
    left: 0;
}


/* --- THREE-tab divergence (user 2026-06-15) ---------------------------------
 * BB's character right-panel header has exactly TWO tabs (Stash/Ground + Perks),
 * each ABSOLUTELY positioned (is-inventory left:0, is-perks left:17.0rem above).
 * This app adds a third — Retinue — the ONE place it deliberately diverges from
 * BB (user: "the one exception where it doesn't look like Battle Brothers").
 * With three buttons the fixed absolute offsets no longer sit centred, so
 * `is-three-tabs` switches the middle container to a CENTRED flex row and lets the
 * three .l-buttons flow, reproducing BB's ~0.4rem tab-frame overlap with a small
 * negative margin. This is NOT a BB port (no BB citation) — a project-specific
 * layout the user authorised. */
.character-screen-container .right-panel-header-module .buttons-container.is-middle.is-three-tabs
{
    left:            0;
    right:           0;
    width:           auto;
    display:         flex;
    justify-content: center;
}

.character-screen-container .right-panel-header-module .buttons-container.is-three-tabs .l-button
{
    position: relative;   /* override the per-tab absolute left offsets above */
    left:     auto;
    right:    auto;
    margin:   0 -0.2rem;  /* reproduce BB's ~0.4rem overlap of the tab-frame art */
}