/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/modules/skills_module.css
 * WHY: the rows of skill / perk / trait icons under the paperdoll.
 * 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/skills_module.css
 *
 * Maps to BB's character_screen_skills_module — three stacked rows of
 * 4.0rem-square skill icons grouped by item slot:
 *   row 1  active item-derived skills (weapon + shield + offhand-tool
 *          skills); rectangular icons.
 *   row 2  passives — background slug + trait perks (tier-0); circular
 *          portrait icons.
 *   row 3  status effects — same circular style as row 2; rendered only
 *          when the brother actually has any.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/modules/character_screen_left_panel/
 *     character_screen_skills_module.css
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 *
 * Tactical-mode trim:
 *   - Tooltips (skills_module.js L105-110: bindTooltip on every icon)
 *     are deferred until bng-game's tooltip module learns the
 *     `skill` / `status-effect` content types — see
 *     character_screen.txt §3.5.
 *   - The scrolling-list wiring (BB L41-42 createList(100, null, true) +
 *     findListScrollContainer) is NOT ported — we let the module's
 *     native overflow:auto handle the rare 3-row case. BB's createList
 *     adds custom scroll-bar styling we'd need to port separately.
 */

/* BB: ui/screens/character/modules/character_screen_left_panel/character_screen_skills_module.css */


/* Source: skills_module.css L12-25 — outer .skills-module.
 * 97.5% wide (intentionally < 100% so the right edge nudges in from
 * the parchment frame), 9.2rem tall.
 *
 * BB ships `overflow: auto`. Earlier port assumed BB's runtime
 * (Coherent GT) silently clipped overflowing rows and switched ours
 * to `overflow: hidden` — that hid the third row (status effects /
 * morale round icon) when the passive row was full. Reverting to
 * BB's `auto` keeps the morale icon reachable via scroll, matching
 * BB verbatim. */
.character-screen-container .skills-module
{
    width:    97.5%;
    height:   9.2rem;
    position: relative;

    overflow: auto;
    outline:  hidden;

    margin-left: 1.0rem;
}

/* The BB-styled vertical scrollbar is defined ONCE in scaffold.css and
 * shared by every BB scroll surface (this skills list + the inventory
 * grid) — single source of truth. See scaffold.css "BB scrollbar". */

/* Source: skills_module.css L27-34 — inner .l-list-container fills the
 * .skills-module rect (BB createList wraps the row stack in this). It is the
 * SCROLLER: the floated skills-rows inside overflow it once the icons exceed the
 * 9.2rem module height, exactly like the inventory list's l-list-container (BB
 * scrolls the whole skills list together — active + passive — verified in BB's
 * character_screen_skills_module.css `overflow: auto` on the module). The BB grip
 * overlay (scrollbar.js) attaches here; the native bar is hidden (scrollbar.css). */
.character-screen-container .skills-module .l-list-container
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    position: absolute;

    overflow-y: auto;
    overflow-x: hidden;
}

/* Source: skills_module.css L36-39 — `.scroll-container` is BB's
 * createList inner element. We don't port the createList machinery,
 * but mirror the 0.1rem top-margin so the first row sits where BB
 * places it. The selector is reachable through any wrapping
 * element — the orchestrator names its inner div `scroll-container`
 * to match. */
.character-screen-container .skills-module .l-list-container .scroll-container
{
    margin-top: 0.1rem;
}

/* Source: skills_module.css L41-45 — .skills-row.
 * Each of the three rows is a 100%-wide float-left strip. Height grows
 * to fit its icons (4.0rem + 0.5rem bottom margin on the inner group
 * container), so an empty row collapses to zero. */
.character-screen-container .skills-module .skills-row
{
    width: 100%;
    float: left;
}

/* Source: skills_module.css L47-51 — .l-skills-group-container.
 * Wraps a single per-slot icon group; floats left so multiple slot
 * groups in a row sit side-by-side. */
.character-screen-container .skills-module .l-skills-group-container
{
    float: left;
}

/* Source: skills_module.css L53-58 — .l-skill-groups-container.
 * The inner flex/float layer that holds the icons; 0.5rem bottom
 * margin separates this row from the next. */
.character-screen-container .skills-module .l-skill-groups-container
{
    float:         left;
    margin-bottom: 0.5rem;
}

/* Source: skills_module.css L71-77 — every <img> directly inside
 * .l-skill-groups-container is a 4.0rem square float-left icon with a
 * 0.2rem horizontal gap. BB stamps icons directly into
 * .l-skill-groups-container with no per-icon wrapper (skills_module.js
 * L99-102), so the selector targets > img. */
.character-screen-container .l-skill-groups-container > img
{
    width:  4.0rem;
    height: 4.0rem;
    float:  left;

    margin-right: 0.2rem;
}


/* ============================================================
 * Injuries / Traits add-remove editor (user request 2026-06-15).
 * THIS PROJECT'S OWN UI — BB has no "add injury/trait" screen, so these are NOT
 * BB-port visuals (no BB citation applies, like .bb-editable-action / .bb-download).
 * The MODAL reuses the BB popup_dialog chrome already defined + cited in
 * levelup.css (.popup-dialog header/content/footer/button-1); only the editor's
 * own pieces — the icon-chip lists — are styled here. The Injuries/Traits TRIGGER
 * buttons live in the stats-module's edit-action row (styled in levelup.css,
 * alongside Base Stats).
 * ============================================================ */

/* --- the modal: a LARGE dialog (user 2026-06-15 — there are many traits /
 * injuries, so it covers big parts of the screen while still reading as a modal:
 * ~90x60rem inside the ~104x78rem character screen, ~7rem/9rem margins). The BB
 * level-up parchment sprite is stretched to fill it (background-size 100% 100%);
 * its ornate border stretches a little at this size — an accepted trade for the
 * room the long lists need. position:relative so the BB scrollbar overlay
 * (scrollbar.js) hosts on the dialog. */
.character-screen .ui-control.popup-dialog.skills-popup
{
    width:    90.0rem;
    height:   60.0rem;
    position: relative;

    background-image:  url("/static/levelup/popup_background_600x300.png");
    background-size:   100% 100%;
    background-repeat: no-repeat;
}

/* 60rem total - 6rem header - 6rem footer = 48rem content; scroll the overflow
 * with the BB grip (skills.js calls window.bbScroll.attach; native bar hidden in
 * scrollbar.css). The wide modal flows many chips per row, so scrolling is rare. */
.character-screen .ui-control.popup-dialog.skills-popup > .content.skills-edit-content
{
    height:     48.0rem;
    padding:    0 5.0rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.character-screen .skills-edit-content .skills-section-title
{
    width:        100%;
    float:        left;
    margin:       0.6rem 0 0.2rem;
    color:        #dda21f;                 /* gold section heading (matches dialog title) */
    text-shadow:  1px 1px rgba(0, 0, 0, 0.5);
}

.character-screen .skills-edit-content .skills-empty
{
    float:  left;
    color:  #9a8f7a;                       /* muted parchment text */
    margin: 0.2rem 0 0.4rem 0.2rem;
}

.character-screen .skills-edit-content .skill-chip-grid
{
    width: 100%;
    float: left;
}

/* One icon + name chip. The icon is the BB trait/injury sprite; the name sits
 * under it so the user can scan by name as well as icon (user 2026-06-15). */
.character-screen .skills-edit-content .skill-chip
{
    width:    8.4rem;
    height:   6.4rem;
    float:    left;
    position: relative;
    margin:   0.2rem;
    padding:  0.3rem 0.2rem 0;

    text-align: center;
}

.character-screen .skills-edit-content .skill-chip > img
{
    width:  4.0rem;
    height: 4.0rem;
}

.character-screen .skills-edit-content .skill-chip .skill-chip-name
{
    width:         100%;
    margin-top:    0.1rem;
    color:         #d6c7a8;
    line-height:   1.4rem;
    max-height:    2.8rem;
    overflow:      hidden;
}

/* An add-list chip is clickable; an already-owned one is dimmed + inert. */
.character-screen .skills-edit-content .skill-chip.is-add
{
    cursor: pointer;
}

.character-screen .skills-edit-content .skill-chip.is-add:hover
{
    background-color: rgba(221, 162, 31, 0.12);   /* faint gold hover wash */
}

.character-screen .skills-edit-content .skill-chip.is-owned
{
    opacity: 0.3;
    cursor:  default;
}

/* Remove cross on a CURRENT chip — top-right, red, appears on hover (the chip
 * shows the red cross to remove it, user 2026-06-15). */
.character-screen .skills-edit-content .skill-chip .skill-chip-remove
{
    top:      0;
    right:    0.6rem;
    position: absolute;
    z-index:  2;

    width:        1.8rem;
    height:       1.8rem;
    line-height:  1.6rem;
    text-align:   center;
    border-radius: 0.9rem;

    color:            #f4d9d3;
    background-color: #9c2b1e;          /* BB-style danger red (our own affordance) */
    cursor:           pointer;
    opacity:          0;
}

.character-screen .skills-edit-content .skill-chip:hover .skill-chip-remove
{
    opacity: 1;
}

.character-screen .skills-edit-content .skill-chip .skill-chip-remove:hover
{
    background-color: #c0392b;
}

/* Footer with a single centered "Done" button (BB has-one-button bar). */
.character-screen .ui-control.popup-dialog.skills-popup > .footer .l-button-bar.has-one-button
{
    width: 17.5rem;
}

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