/* Copied VERBATIM from bng-game: webapp/client/common/tooltip.css
 *   (the BB tooltip-module row styling).
 * WHY: this project shows the SAME Battle Brothers hover tooltips bng-game
 *   shows on its inventory screen (item stats, perks, skills). bng-game
 *   already ported BB's tooltip_module.css; we reuse it unchanged so our
 *   tooltips look identical rather than re-deriving the parchment styling.
 * NOT changed: nothing — byte-for-byte copy, served from static/inventory/
 *   here instead of bng-game's client/common/. The original bng-game
 *   header (with BB source citations) follows. */
/*
 * BB tooltip CSS — verbatim port.
 *
 * Source files (every rule below traces back to one of these):
 *   - external/bb-vanilla-data/data_001/ui/screens/tooltip/modules/tooltip_module.css
 *   - external/bb-vanilla-data/data_001/ui/fonts.css
 *   - external/bb-vanilla-data/data_001/ui/colors.css
 *
 * BB class names preserved verbatim (.tooltip-module, .row, .title,
 * .description, .text, .label, .l-left-column, .l-right-column,
 * .title-container, .description-container, .content-container,
 * .progressbar-container, .progressbar, .progressbar-label,
 * .top-ornament, .title-image, .l-progressbar-container).
 *
 * @font-face declarations live in common/fonts.css. Every page that
 * loads tooltip.css is expected to also load common/fonts.css, so
 * Cinzel-Bold / FreeUniversal-Regular / FreeUniversal-Italic are
 * always available when this file applies.
 *
 * Two BB-source deviations, intentional:
 *   1) `position: absolute` -> `position: fixed`. BB's tooltip is
 *      positioned by the tooltip module relative to its scroll-locked
 *      coui parent; our positioner uses viewport mouse coords.
 *   2) `pointer-events: none` is NOT applied. BB has it commented out
 *      (tooltip_module.css L21), and parent README forbids it.
 */

/* BB: ui/screens/tooltip/modules/tooltip_module.css */
/* BB: ui/controls.css */
/* BB: ui/fonts.css */
/* BB: ui/colors.css */


/* =============== fonts.css L95-115 — Title font ====================== */
.title-font-very-small,
.title-font-small,
.title-font-normal,
.title-font-big,
.title-font-very-big
{
    font-weight: normal;
    font-size  : 1.2rem;
    font-style : normal;
    font-family: 'Cinzel-Bold', monospace;
}

.title-font-small      { font-size: 1.4rem; }
.title-font-normal     { font-size: 1.8rem; }
.title-font-big        { font-size: 2.2rem; }
.title-font-very-big   { font-size: 2.8rem; }


/* =============== fonts.css L131-167 — Text font ====================== */
.text-font-very-small,
.text-font-small,
.text-font-medium,
.text-font-normal,
.text-font-big,
.text-font-very-big
{
    font-weight: normal;
    font-size  : 1.2rem;
    font-style : normal;
    font-family: 'FreeUniversal-Regular';
}

.text-font-small       { font-size: 1.4rem; }
.text-font-medium      { font-size: 1.6rem; }
.text-font-normal      { font-size: 1.8rem; }
.text-font-big         { font-size: 2.2rem; }
.text-font-very-big    { font-size: 2.8rem; }


/* =============== fonts.css L173-209 — Description font =============== */
.description-font-very-small,
.description-font-small,
.description-font-medium,
.description-font-normal,
.description-font-big,
.description-font-very-big
{
    font-weight: normal;
    font-size  : 1.2rem;
    font-style : italic;
    font-family: 'FreeUniversal-Italic';
}

.description-font-small    { font-size: 1.4rem; }
.description-font-medium   { font-size: 1.6rem; }
.description-font-normal   { font-size: 1.8rem; }
.description-font-big      { font-size: 2.0rem; }
.description-font-very-big { font-size: 2.6rem; }


/* =============== fonts.css L216-219 — font-bold ====================== */
.font-bold { font-weight: bold !important; }


/* =============== colors.css L62-65 — font-color-label ================ */
.font-color-label
{
    color: #d7b174 !important;
}

/* =============== colors.css L108-111 — font-color-ink ================ */
.font-color-ink
{
    color: rgba(1,0,53,200) !important;
}

/* =============== colors.css L92-96 — font-color-negative-value ======= */
.font-color-negative-value
{
    color: #CD2626 !important;
}

/* =============== colors.css L117-121 — font-color-progressbar-label == */
.font-color-progressbar-label
{
    color: #c6c6c6;
    text-shadow: 1px 1px 1px #000;
}


/* ===================================================================== */
/* tooltip_module.css L11-26 — .tooltip-module                            */
/* ===================================================================== */
.tooltip-module
{
    max-width: 24.0rem;
    width:     24.0rem;

    padding: 0.6rem;
    padding-bottom: 1.0rem;
    position: fixed;     /* BB: absolute. We use fixed (viewport mouse). */
    z-index: 9999;       /* not in BB — needed because tooltip is appended to body */

    overflow: hidden;
    /* pointer-events: none — BB has it commented out, we follow. */

    background-image: url("/bb/images/ui/tooltips/tooltip_255_bottom.png");
    background-size: 25.5rem 55.3rem;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* tooltip_module.css L28-36 */
.tooltip-module.is-full-width
{
    max-width: 30.0rem;
    width:     30.0rem;

    background-image: url("/bb/images/ui/tooltips/tooltip_315_bottom.png");
    background-size: 31.5rem 55.3rem;
    background-position: bottom;
}

/* tooltip_module.css L38-48 */
.tooltip-module .top-ornament
{
    width: 31.5rem;
    height: 1.3rem;
    top: -0.3rem;
    left: -0.3rem;
    position: absolute;
    background-image: url("/bb/images/ui/tooltips/tooltip_255_top.png");
    background-size: 25.5rem 1.3rem;
    background-position: bottom;
}

/* tooltip_module.css L50-60 */
.tooltip-module.is-full-width .top-ornament
{
    width: 31.5rem;
    height: 1.3rem;
    top: -0.3rem;
    left: -0.3rem;
    position: absolute;
    background-image: url("/bb/images/ui/tooltips/tooltip_315_top.png");
    background-size: 31.5rem 1.3rem;
    background-position: bottom;
}

/* tooltip_module.css L62-67 */
.tooltip-module .header-container
{
    width: 100%;
    float: left;
    padding-top: 0.2rem;
}

/* tooltip_module.css L69-72 */
.tooltip-module .content-container
{
    float: left;
}

/* tooltip_module.css L74-78 */
.tooltip-module .left-content-container
{
    width: 7.0rem;
    float: left;
}

/* tooltip_module.css L80-84 */
.tooltip-module .right-content-container
{
    width: 24.0rem;
    float: left;
}

/* tooltip_module.css L87-91 */
.tooltip-module.is-ui-item-content .right-content-container
{
    width: 23.0rem;
    float: left;
}

/* tooltip_module.css L93-100 */
.tooltip-module.is-tile-content .right-content-container,
.tooltip-module.is-skill-content .right-content-container,
.tooltip-module.is-status-effect-content .right-content-container,
.tooltip-module.is-ui-element-content .right-content-container
{
    width: 30.0rem;
    float: left;
}

/* tooltip_module.css L103-107 */
.tooltip-module .footer-container
{
    width: 100%;
    float: left;
}

/* tooltip_module.css L109-113 */
.tooltip-module .hint-container
{
    width: 100%;
    float: left;
}

/*
    Generic Rows — tooltip_module.css L119-162
*/
.tooltip-module .row
{
    width: 100%;
    float: left;
    clear: left;
}

.tooltip-module .row:last-child
{
    margin-bottom: 0.2rem;
}

.tooltip-module .row .l-left-column
{
    width: 3.0rem;
    min-height: 2.0rem;
    float: left;
    position: relative;
}

.tooltip-module .row .label
{
    line-height: 2.0rem;
    float: left;
}

.tooltip-module .row .label img
{
    height: 2.0rem;
}

.tooltip-module .row .l-right-column
{
    min-height: 2.0rem;
    float: left;
    position: relative;
}

.tooltip-module .row .text
{
    line-height: 2.0rem;
    float: left;
}


/*
    Header — tooltip_module.css L168-197
*/
.tooltip-module .row.title-container
{
}

.tooltip-module .title-container .title
{
    max-width: 22.2rem;
    height: 100%;
    margin-top: 0.2rem;
    float: left;
}

.tooltip-module.is-full-width .title-container .title
{
    max-width: 28.2rem;
}

.tooltip-module .title-container .title-image
{
    width: 1.2rem;
    height: 2.3rem;
    margin-right: 0.6rem;
    float: left;
}

.tooltip-module .title-image img
{
    width: 100%;
    height: 100%;
}


/* tooltip_module.css L200-207 */
.tooltip-module .row.description-container
{
}

.tooltip-module .description-container .description
{
}


/* tooltip_module.css L209-265 — title-text-container family.
 * Not used by current bng tooltip data, ported anyway so future
 * BB tooltips that emit child rows render correctly. */
.tooltip-module .row.title-text-container,
.tooltip-module .row.title-child-text-container
{
    margin-top: 0.4rem;
    overflow: hidden;
}

.tooltip-module .row.title-child-text-container
{
    margin-left: 4.0rem;
}

.tooltip-module .row.title-child-text-container.is-full-width
{
    margin-left: 1.5rem;
}

.tooltip-module .title-text-container .l-right-column
{
    width: 19.5rem;
}

.tooltip-module .title-child-text-container .l-right-column
{
    width: 16.5rem;
}

.tooltip-module.is-full-width .title-text-container .l-right-column
{
    width: 27.0rem;
}

.tooltip-module.is-full-width .title-child-text-container .l-right-column
{
    width: 23.0rem;
}

.tooltip-module .title-text-container .l-right-column.is-full-width
{
    width: 26.0rem;
}

.tooltip-module .title-child-text-container .l-right-column.is-full-width
{
    width: 17.0rem;
}

.tooltip-module.is-full-width .title-text-container .l-right-column.is-full-width
{
    width: 30.0rem;
}

.tooltip-module.is-full-width .title-child-text-container .l-right-column.is-full-width
{
    width: 21.5rem;
}


/*
    Left Content — tooltip_module.css L270-292
*/
.tooltip-module .left-content-container .l-image-container
{
    width: 5.6rem;
    margin-top: 0.4rem;
}

.tooltip-module .left-content-container .l-image-container.is-small
{
    height: 5.6rem;
}

.tooltip-module .left-content-container .l-image-container.is-large
{
    height: 11.2rem;
}

.tooltip-module .left-content-container img
{
    width: 100%;
}


/*
    Right Content — tooltip_module.css L298-400
*/
.tooltip-module .row.content-container,
.tooltip-module .row.content-child-container
{
    margin-top: 0.4rem;
    overflow: hidden;
}

.tooltip-module .row.content-child-container
{
    margin-left: 4.0rem;
}

.tooltip-module .row.content-child-container.is-full-width
{
    margin-left: 0rem;
}

.tooltip-module.is-skill-content .row.content-child-container.is-full-width
{
    margin-left: 1.5rem;
}

.tooltip-module .row.content-container:first-child
{
    margin-top: 0.4rem;
}

.tooltip-module .content-container .l-right-column
{
    width: 18.0rem;
}

.tooltip-module .content-child-container .l-right-column
{
    width: 15.0rem;
}

.tooltip-module .content-container .l-right-column.is-full-width
{
    width: 24.0rem;
}

.tooltip-module .content-child-container .l-right-column.is-full-width
{
    width: 18.0rem;
    margin-left: 0;
}

/* Special Content Cases */
.tooltip-module.is-entity-content .content-container .l-right-column
{
    width: 21.0rem;
}

.tooltip-module.is-ui-item-content .content-container .l-right-column
{
    width: 20.0rem;
}

.tooltip-module.is-ui-item-content .content-container .l-right-column.is-full-width
{
    width: 22.0rem;
}

.tooltip-module.is-tile-content .content-container .l-right-column,
.tooltip-module.is-skill-content .content-container .l-right-column,
.tooltip-module.is-status-effect-content .content-container .l-right-column,
.tooltip-module.is-ui-element-content .content-container .l-right-column
{
    width: 27.0rem;
}

.tooltip-module.is-ui-item-content .content-child-container .l-right-column
{
    width: 16.0rem;
}

.tooltip-module.is-tile-content .content-child-container .l-right-column,
.tooltip-module.is-skill-content .content-child-container .l-right-column,
.tooltip-module.is-status-effect-content .content-child-container .l-right-column,
.tooltip-module.is-ui-element-content .content-child-container .l-right-column
{
    width: 23.0rem;
}

.tooltip-module.is-tile-content .content-container .l-right-column.is-full-width,
.tooltip-module.is-skill-content .content-container .l-right-column.is-full-width,
.tooltip-module.is-status-effect-content .content-container .l-right-column.is-full-width,
.tooltip-module.is-ui-element-content .content-container .l-right-column.is-full-width
{
    width: 30.0rem;
}

.tooltip-module.is-tile-content .content-child-container .l-right-column.is-full-width,
.tooltip-module.is-skill-content .content-child-container .l-right-column.is-full-width,
.tooltip-module.is-status-effect-content .content-child-container .l-right-column.is-full-width,
.tooltip-module.is-ui-element-content .content-child-container .l-right-column.is-full-width
{
    width: 23.0rem;
    margin-left: 0;
}


/* Progressbar — tooltip_module.css L404-445 */
.tooltip-module .row .l-progressbar-container
{
    width: 19.6rem;
    height: 2.0rem;
    position: relative;
    float: left;
}

.tooltip-module .row .progressbar-container
{
    top: 0;
    left: 0;
    width: 19.6rem;
    height: 2.0rem;
    position: absolute;
    margin: auto;
}

.tooltip-module .progressbar-container .progressbar,
.tooltip-module .progressbar-container .progressbar-preview
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.tooltip-module .progressbar-container .progressbar-preview
{
    z-index: 2;
}

.tooltip-module .progressbar-container .progressbar-label
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;

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


/* =============== controls.css L160-206 — verbatim ====================
 * `.ui-control-stats-progressbar-container-slim` and the per-style fill
 * rules. BB applies these unscoped (any progressbar with the matching
 * class chain picks them up). The class chain BB tooltip_module.js writes
 * for tooltip rows (L1836 / L1839) is exactly:
 *     .progressbar-container.ui-control-stats-progressbar-container-slim
 *     .progressbar.ui-control-stats-progressbar.<style>
 * with `<style>` passed verbatim through _data.style. */
.ui-control-stats-progressbar-container-slim
{
    background-image: url("/bb/images/ui/bars/bar_empty_196.png");
    background-size: 19.6rem 2.0rem;
}

.ui-control-stats-progressbar.armor-head-slim,
.ui-control-stats-progressbar-preview.armor-head-slim
{
    background-image: url("/bb/images/ui/bars/bar_fill_armor_196.png");
    background-repeat: no-repeat;
    background-size: 19.6rem 2.0rem;
}

.ui-control-stats-progressbar.armor-body-slim,
.ui-control-stats-progressbar-preview.armor-body-slim
{
    background-image: url("/bb/images/ui/bars/bar_fill_armor_196.png");
    background-repeat: no-repeat;
    background-size: 19.6rem 2.0rem;
}

.ui-control-stats-progressbar.hitpoints-slim,
.ui-control-stats-progressbar-preview.hitpoints-slim
{
    background-image: url("/bb/images/ui/bars/bar_fill_health_196.png");
    background-repeat: no-repeat;
    background-size: 19.6rem 2.0rem;
}

.ui-control-stats-progressbar.morale-slim,
.ui-control-stats-progressbar-preview.morale-slim
{
    background-image: url("/bb/images/ui/bars/bar_fill_morale_196.png");
    background-repeat: no-repeat;
    background-size: 19.6rem 2.0rem;
}

.ui-control-stats-progressbar.fatigue-slim,
.ui-control-stats-progressbar-preview.fatigue-slim
{
    background-image: url("/bb/images/ui/bars/bar_fill_fatigue_196.png");
    background-repeat: no-repeat;
    background-size: 19.6rem 2.0rem;
}


/*
    Footer — tooltip_module.css L448-495
*/
.tooltip-module .row.section-container
{
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.tooltip-module .row .section-title
{
    width: 100%;
    height: 2.0rem;

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

.tooltip-module .row .l-section-icon-container
{
    width: 100%;
    float: left;
    position: relative;
}

.tooltip-module .row .section-icon-container
{
    margin: 0 auto;
}

.tooltip-module .section-icon-container .icon
{
    width: 3.4rem;
    float: left;
}

.tooltip-module .section-icon-container .icon img
{
    width: 100%;
}


/*
    Hint — tooltip_module.css L499-555
*/
.tooltip-module .row.hint-text-container,
.tooltip-module .row.hint-child-text-container
{
    margin-top: 0.4rem;
    overflow: hidden;
}

.tooltip-module .row.hint-child-text-container
{
    margin-left: 4.0rem;
}

.tooltip-module .row.hint-child-text-container.is-full-width
{
    margin-left: 1.5rem;
}

.tooltip-module .hint-text-container .l-right-column
{
    width: 19.5rem;
}

.tooltip-module .hint-child-text-container .l-right-column
{
    width: 16.5rem;
}

.tooltip-module.is-full-width .hint-text-container .l-right-column
{
    width: 27.0rem;
}

.tooltip-module.is-full-width .hint-child-text-container .l-right-column
{
    width: 22.0rem;
}

.tooltip-module .hint-text-container .l-right-column.is-full-width
{
    width: 26.0rem;
}

.tooltip-module .hint-child-text-container .l-right-column.is-full-width
{
    width: 17.0rem;
}

.tooltip-module.is-full-width .hint-text-container .l-right-column.is-full-width
{
    width: 30.0rem;
}

.tooltip-module.is-full-width .hint-child-text-container .l-right-column.is-full-width
{
    width: 21.5rem;
}