/* ──────────────────────────────────────────────────────────────
   1 · Card header – lock overall height (32 px)
   ────────────────────────────────────────────────────────────── */
.custom-card-header {
    /* keep the usual Bootstrap paddings but fix the total height */
    height: 34px;            /* = 24 px content + 2 × 4 px padding */
    display: flex;
    align-items: center;     /* vertical‑centre everything */
    padding: 4px 8px;        /* = py‑1 px‑2 */
}

/* the inner <Row> & <Col> inherit the centring */
.custom-card-header .row,
.custom-card-header .col { align-items: center; }

/* ──────────────────────────────────────────────────────────────
   2 · “Select Chains” pill – must not outgrow 24 px
   ────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   Chain selector pill  –  visually matches .export-button
   Header height remains 32 px (see .custom-card-header rule)
   ────────────────────────────────────────────────────────────── *//* ──────────────────────────────────────────────────────────────
   Chain selector pill – visually identical to .export-button
   but in the primary blue brand colour                         */
.export-button,
.chain-btn {
    /* colors — blue variant */
    color: var(--blue-600);                /* text  */
    background-color: #fff;                /* white background */
    border: 0.5px solid var(--blue-600);   /* same blue border */

    /* box model — keep identical to .export-button */
    height: 30px;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: normal;
    padding: 0.45rem 0.75rem 0.5rem;

    /* flex helpers */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* elevation + transition */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover / active state */
.export-button:hover,
.export-button:active,
.chain-btn:hover,
.chain-btn:active,
.chain-btn.active {
    color: #fff;
    background-color: var(--blue-600);
    border-color: var(--blue-600);
    text-decoration: none;                 /* keep text crisp */
}

/* (unchanged) Popover tidy‑up – checklist edges align perfectly */
#chain-popover .popover-body { padding: 0; }

/* =========================================================================
   Button-like styling for the Dash/React-Select dropdown
   ========================================================================= */
.btn-style-dropdown .Select-control {
    /* identical colours & box model */
    color: var(--blue-600);
    background-color: #fff;
    border: 0.5px solid var(--blue-600);

    height: 30px;                     /* keep height equal to buttons   */
    min-height: 30px;                 /* react-select override          */
    padding: 0 0.75rem;               /* matches button’s horizontal    */

    font-weight: 500;
    font-size: 1.05rem;
    line-height: normal;

    display: inline-flex;             /* centre value vertically        */
    align-items: center;
    justify-content: space-between;   /* value left, arrow right        */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* ===== text inside (selected value / placeholder) ===== */
/* =========================================================================
   Fine-tune vertical centring of the label inside the dropdown
   ========================================================================= */

.btn-style-dropdown .Select-value,
.btn-style-dropdown .Select-placeholder {
    /* kill default react-select padding that offsets text */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* flex-centres the text within its row */
    display: flex;
    align-items: center;
}



/* ===== arrow ===== */
.btn-style-dropdown .Select-arrow {
    border-top-color: var(--blue-600);           /* blue arrow */
    transition: border-top-color 0.3s ease;
}

/* =========================================================================
   Hover / active states – mirror your .export-button rules
   ========================================================================= */
.btn-style-dropdown .Select-control:hover,
.btn-style-dropdown.is-open .Select-control,
.btn-style-dropdown.is-focused .Select-control {
    background-color: var(--blue-600);
    color: #fff;
    border-color: var(--blue-600);
}

.btn-style-dropdown .Select-control:hover .Select-arrow,
.btn-style-dropdown.is-open .Select-arrow,
.btn-style-dropdown.is-focused .Select-arrow {
    border-top-color: #fff;           /* white arrow on blue background */
}

/* =========================================================================
   Remove react-select’s default focus outline (optional)
   ========================================================================= */
.btn-style-dropdown .Select-control:focus {
    outline: none;
}
.btn-style-dropdown .Select-value-label {
    line-height: 1;             /* prevent extra line-height slack   */
    padding: 0 !important;      /* nuke the last 2 px of stealth pad */
}

.btn-style-dropdown .Select-value,
.btn-style-dropdown .Select-placeholder,
.btn-style-dropdown .Select-control {
    color: var(--blue-600);              /* force blue at all times */
}

/* ------------------------------------------------------------------------- */
/* 1️⃣  Make the text permanently blue                                       */
/* ------------------------------------------------------------------------- */
.btn-style-dropdown .Select-value,
.btn-style-dropdown .Select-placeholder,
.btn-style-dropdown .Select-control {
    color: var(--blue-600);              /* force blue at all times */
}

/* ------------------------------------------------------------------------- */
/* 2️⃣  Keep background white on hover / focus / open                        */
/* ------------------------------------------------------------------------- */
.btn-style-dropdown .Select-control:hover,
.btn-style-dropdown.is-open .Select-control,
.btn-style-dropdown.is-focused .Select-control {
    background-color: #fff;              /* stay white */
    border-color: var(--blue-600);       /* outline still blue */
    color: var(--blue-600);              /* text stays blue */
}

/* optional: arrow stays blue & centred */
.btn-style-dropdown .Select-control:hover .Select-arrow,
.btn-style-dropdown.is-open .Select-arrow,
.btn-style-dropdown.is-focused .Select-arrow {
    border-top-color: var(--blue-600);
}