/* resources.css — the company resource bar (crowns / ammunition / medicine /
 * tools / renown) shown ABOVE the inventory.
 *
 * THIS PROJECT'S OWN file — NOT copied from bng-game. BB hides these numbers
 * on the character/inventory screen and shows them only in the world-map top
 * bar; this view deliberately mixes them in, above the inventory (user
 * request 2026-06-14). Every visual value below is cited from BB's world-map
 * assets bar:
 *   external/bb-vanilla-data/data_001/ui/screens/world/modules/
 *     world_screen_topbar/world_screen_topbar_assets_module.css
 * The DOM mirrors that module's .asset-container > .l-assets-container >
 * (img + .label) structure so the cited rules transfer 1:1. The only layout
 * change is wrapping the cells in a flex row instead of BB's fixed-top-bar
 * absolute offsets (this bar is in normal flow above the right panel, not the
 * world-map HUD). */

/* Placement. BB shows these in the world-map TOP BAR, which stays above the
 * character screen — there is NO slot for them inside the right column, which
 * is budget-full (right-panel 51.6rem + 1.2rem + formation 25.2rem ≈ the
 * container's 78.2rem). So the bar must NOT take flow space there: as a normal
 * child it pushed the floated right-panel + formation down ~3.6rem and the
 * formation overflowed the parchment. It is instead positioned absolutely
 * into the parchment header strip just above the right column — the same
 * negative-top-into-the-frame trick the formation roster-count badge uses
 * (formation.css .roster-count-container top:-3.0rem). top:0 of
 * .l-right-content-container is the right column's top; -3.8rem lifts the
 * 3.0rem bar into the strip above it (clear of the 3.5rem tab header below).
 *
 * Sizing: BB world_screen_topbar_assets_module.css L24-32 (.asset-container
 * height 3.0rem). BB's inter-asset gap is 0.6rem (it steps cells' absolute
 * `left` by cell-width + 0.6rem: is-food L48 10.6rem − is-money L43 1.0rem =
 * 9.6rem for a 9.0rem cell), reused as the flex gap. */
/* Resources moved to the right margin (user 2026-06-17): no top edit-bar anymore.
 * They now sit STACKED VERTICALLY inside .add-item-actions, below the Add-item
 * buttons ("+ Accessory"). Each cell keeps its BB-cited internals (icon + value);
 * only the container layout changed from a horizontal bar to a column. */

/* Resources stacked vertically in the right margin, TOP-ALIGNED with the formation
 * strip (user 2026-06-17). The formation starts at container 52.8rem (right-panel-
 * module 51.6rem + 1.2rem margin), so the resources start at the same height. */
.character-screen-container .company-resources
{
    position:       absolute;
    left:           calc(100% + 0.8rem);   /* right margin, like the Add-item buttons */
    top:            52.8rem;                /* same height the formation strip starts */
    width:          11.0rem;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    z-index:        11;
}

/* Each cell is a full-width row in the vertical stack (icon left, value next to
 * it — all rows aligned). */
.company-resources .asset-container
{
    position: relative;
    width:    100%;
    height:   3.0rem;
}

/* BB L77-84 .l-assets-container (fills the cell). */
.company-resources .l-assets-container
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* BB L86-95 .l-assets-container img (the 2.8rem asset icon, vertically
 * centred at the cell's left edge). */
.company-resources .l-assets-container img
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.8rem;
    height: 2.8rem;
    margin: auto;
}

/* The renown / reputation sprites have less transparent padding than the others,
 * so they read bigger at 2.8rem — nudge them down to visually match (user
 * 2026-06-15). */
.company-resources .asset-container.is-renown .l-assets-container img,
.company-resources .asset-container.is-reputation .l-assets-container img
{
    width:  2.4rem;
    height: 2.4rem;
}

/* BB L97-108 .l-assets-container .label (the number, left of the icon's
 * right edge). */
.company-resources .l-assets-container .label
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3.2rem;
    width: 6.0rem;
    height: 3.0rem;
    margin: auto;
    text-align: left;
    line-height: 3.4rem;
}

/* The resource VALUE is an editable <input> (user request 2026-06-14: change
 * resources in the view). It occupies the same box as BB's .label (L97-108)
 * but stretches to the cell's right edge so 6-digit money fits, with the input
 * chrome stripped so it reads as plain BB text until hovered/focused. NOT a BB
 * element — this is our editor affordance, so no BB citation for the
 * transparent-background / focus-highlight bits. */
.company-resources .l-assets-container .bb-resource-input
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3.2rem;
    /* Fixed ~4-digit column, RIGHT-aligned, so the values line up by place value
       down the vertical stack — units under units — and read easily (user
       2026-06-19). Not aligned to the window: the column sits right after the icon.
       The .label box was 1.0rem/digit (6.0rem fit 6 digits), so ~4 digits = 4.2rem;
       rare 5-6 digit money just extends further left, still right-aligned. */
    width: 4.2rem;
    height: 3.0rem;
    margin: auto;

    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    text-align: right;
    line-height: 3.0rem;

    appearance: textfield;
    -moz-appearance: textfield;
}
.company-resources .l-assets-container .bb-resource-input::-webkit-inner-spin-button,
.company-resources .l-assets-container .bb-resource-input::-webkit-outer-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}
.company-resources .l-assets-container .bb-resource-input:hover,
.company-resources .l-assets-container .bb-resource-input:focus
{
    background: rgba(0, 0, 0, 0.35);
}

/* Save / download box (user 2026-06-15) — a Blood & Gold-styled callout (NOT a
 * BB element: our own blue/gold chrome) in the empty lower-right, with the
 * editor's capability list + the download button. Positioned at the bottom-right
 * of the right content column, below the inventory grid. */
/* Add-item buttons — in the RIGHT margin (left:100% of the right content column,
 * symmetric with the left edit buttons), at the top (by the inventory's top); the
 * download box sits at the bottom of the same margin (user 2026-06-15). Buttons
 * reuse .left-edit-button styling. */
.character-screen-container .add-item-actions
{
    position: absolute;
    left:     calc(100% + 0.8rem);
    top:      5.0rem;
    width:    11.0rem;
    z-index:  11;

    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}
/* Named — the headline action: DOUBLE height + a bigger label, on top of the stack
 * (user 2026-06-16). The `.button-7` in the selector outranks levelup.css's fixed
 * .button-7 height regardless of CSS load order. */
.character-screen-container .add-item-actions .add-named-big.button-7,
.character-screen-container .add-item-actions .add-named-big.button-7:hover,
.character-screen-container .add-item-actions .add-named-big.button-7.is-selected
{
    height:          4.8rem;                 /* 2x the normal 2.4rem */
    /* Fill the FULL double height in every state — levelup.css's :hover rule otherwise
     * resets the sprite to the single-height 2.4rem bar (the "bar that doesn't fit"). */
    background-size: 11.0rem 4.8rem;
}
/* Center the label on BOTH axes — the base rule top-anchors it with a 0.4rem nudge
 * tuned for the short button, which sits too high on the double-height one. */
.character-screen-container .add-item-actions .add-named-big.button-7 > .label
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0;
    font-size:       1.6rem;
}
/* A little vertical spacing between the groups (Named/Legendary | equipment | misc). */
.character-screen-container .add-item-actions .add-item-gap { height: 0.6rem; }

/* Positioned OUTSIDE the inventory screen, in the right margin (symmetric with
 * the left edit-buttons in the left margin) — left:100% of the right content
 * column puts it just past the screen's right edge, never overlaying the
 * inventory/formation (user 2026-06-15). */
.character-screen-container .bb-save-box
{
    position: absolute;
    left:     calc(100% + 0.8rem);
    bottom:   1.0rem;          /* moved to the bottom of the right margin (user 2026-06-15) */
    width:    15.5rem;
    z-index:  11;

    padding:       1.0rem 1.1rem;
    background:    rgba(10, 16, 24, 0.92);
    border:        0.1rem solid #29b6f6;            /* B&G blue */
    border-radius: 0.6rem;
    box-shadow:    0 0 1.2rem rgba(41, 182, 246, 0.45);
}
.character-screen-container .bb-save-box .bb-save-title
{
    margin-bottom: 0.4rem;
    color:         #f0b121;                          /* B&G gold */
    font-size:     1.6rem;
    font-weight:   bold;
    text-shadow:   1px 1px 1px #000;
}
.character-screen-container .bb-save-box .bb-save-desc
{
    margin-bottom: 0.5rem;
    color:         #cfe8f5;
    font-size:     1.2rem;
    line-height:   1.55rem;
}
.character-screen-container .bb-save-box .bb-save-list
{
    margin:       0 0 0.9rem;
    padding-left: 1.6rem;
    color:        #cfe8f5;
    font-size:    1.15rem;
    line-height:  1.6rem;
    list-style:   disc;
}
.character-screen-container .bb-save-box .bb-save-list li { margin: 0.1rem 0; }
.character-screen-container .bb-save-box .bb-save-button
{
    display:       block;
    text-align:    center;
    padding:       0.7rem 0;
    border-radius: 0.4rem;
    background:    #29b6f6;                           /* B&G blue button */
    color:         #08121c;
    font-size:     1.6rem;
    font-weight:   bold;
    cursor:        pointer;
    text-shadow:   none;
}
.character-screen-container .bb-save-box .bb-save-button:hover
{
    background: #6fd0ff;
    box-shadow: 0 0 0.8rem rgba(41, 182, 246, 0.9);
}