/* ============================================================
 * Editable affordance — THIS PROJECT'S OWN UI (user request 2026-06-15).
 *
 * This project reuses the Battle Brothers character/inventory UI so the user
 * knows where to look — but BB's UI is read-only, so nothing in it signals
 * "you can change this". We add an UNMISTAKABLE marker on every editable thing
 * (numbers you can type over, buttons that add/change data). Per the user:
 * obviousness over good looks, and a BLUE accent — nothing in BB's all-gold/
 * brown/parchment UI is blue, so blue pops instantly as "this is interactive,
 * not part of the original game screen".
 *
 * NOT a BB port — no BB citation applies; these are deliberately NON-BB hints.
 *
 * The marker is BLUE, and blue alone (user 2026-06-15: no pencil icon — it was
 * confusing; the blue is enough):
 *   .bb-editable        a value the user edits in place (resource <input>s) —
 *                       blue text + blue underline box; focus brightens it.
 *   .bb-editable-action a button that opens an editor / adds / changes (Change
 *                       Stats, the level-up affordance; Add Weapon/Armor/...
 *                       later) — blue glow so it stands apart from BB's static
 *                       tab buttons.
 * ============================================================ */

/* The one blue. Bright azure — high contrast on the brown parchment. */
:root { --bb-edit-blue: #29b6f6; --bb-edit-blue-bright: #6fd0ff; }


/* --- editable number inputs (resources) ------------------------------- */
.character-screen .bb-editable
{
    color:         var(--bb-edit-blue-bright) !important;
    background:    rgba(41, 182, 246, 0.10);
    border:        0.1rem solid var(--bb-edit-blue);
    border-radius: 0.3rem;
    box-shadow:    0 0 0.5rem rgba(41, 182, 246, 0.55);
    cursor:        text;
    outline:       none;
}

.character-screen .bb-editable:hover,
.character-screen .bb-editable:focus
{
    background:  rgba(41, 182, 246, 0.20);
    border-color: var(--bb-edit-blue-bright);
    box-shadow:  0 0 0.8rem rgba(41, 182, 246, 0.95);
}

/* --- editable / action buttons (Change Stats; future Add X) ------------ */
/* Layered on top of whatever BB button skin the element already uses, so it
 * keeps the BB look but gains an obvious blue "this does an edit" halo. */
.character-screen .bb-editable-action
{
    box-shadow:   0 0 0.7rem 0.1rem rgba(41, 182, 246, 0.85);
    border:       0.1rem solid var(--bb-edit-blue);
    border-radius: 0.3rem;
}

.character-screen .bb-editable-action:hover
{
    box-shadow: 0 0 1.1rem 0.15rem rgba(41, 182, 246, 1.0);
    border-color: var(--bb-edit-blue-bright);
}


/* Action buttons (Change Stats, the level-up up-arrow) read as clickable. */
.character-screen .bb-editable-action { cursor: pointer; }

/* The action button's LABEL text is blue too, not just the border/glow
 * (user 2026-06-15) — so "Change Stats" (and future Add X) reads as editable. */
.character-screen .bb-editable-action .label { color: var(--bb-edit-blue-bright) !important; }

/* Action-glyph prefixed on each EDIT-action button label (user 2026-06-15), one
 * shared spacing rule. The glyph reflects the action: Level Up ▲ (up-arrow),
 * Injuries/Traits ± (add AND remove), Base Stats ✎ (edit), Add Perk Point +
 * (add only). Each button includes <span class="edit-icon">GLYPH</span>. */
.character-screen .edit-icon { margin-right: 0.3rem; }

/* (The name-container override that used to live here — added to make room for an
 * in-header Level Up button — was REMOVED when that button moved to the edit-bar
 * (user 2026-06-15: everything INSIDE the BB screen must look EXACTLY like BB). The
 * brother name now uses BB's own centered layout, merc_summary.css name label,
 * cited to left_panel_header_module.css L100-115 — no override.) */

/* TWO indicators that a level-up is spendable (user 2026-06-15): (1) BB's own
 * representation — the XP bar reads "Click here to level up!" + a star on the
 * level badge (progression.css / progression.js, copied from BB setLevel/setXP) —
 * AND (2) our blue marker layered ON TOP, so it reads as clickable like every
 * other editable thing in this app. progression.js toggles .is-clickable when a
 * level-up is pending. */
.character-screen .l-xp-center-container.is-clickable
{
    box-shadow:    0 0 0.9rem 0.12rem rgba(41, 182, 246, 0.95);
    border:        0.1rem solid var(--bb-edit-blue);
    border-radius: 0.3rem;
    cursor:        pointer;
}


/* ============================================================
 * Read-only shared view (/s/<token>): the server sets
 * .character-screen.is-readonly. Show the company exactly like a normal view
 * but strip every edit affordance. The editable markers above ALL carry
 * .bb-editable / .bb-editable-action, and the level-up XP bar toggles
 * .is-clickable — so neutralizing those three covers everything. (moves.js also
 * gates drag + makes the resource inputs read-only on window.READONLY.)
 * ============================================================ */
.character-screen.is-readonly .bb-editable-action { display: none !important; }

.character-screen.is-readonly .bb-editable
{
    /* Strip the blue edit accent but keep the number VISIBLE in BB's value gold
       (#dda21f = .font-color-value, scaffold.css / BB ui/colors.css L77-80). The
       old `color: inherit` resolved to the dark panel text colour → black-on-black
       resource numbers (user 2026-06-19); this is more specific than both the blue
       `.bb-editable` rule and `.font-color-value`, so it must name the gold itself. */
    color:        #dda21f !important;
    background:   none;
    border:       none;
    box-shadow:   none;
    pointer-events: none;
}

.character-screen.is-readonly .l-xp-center-container.is-clickable
{
    box-shadow:   none;
    border:       none;
    cursor:       default;
    pointer-events: none;
}