.footer-bar {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1.5em;
}

.footer-bar.fixed {
    position: fixed;
    bottom: 1vmin;
    width: stretch;
    z-index: 100;
}

.footer-bar button {
    background-color: var(--current-background);
}

.investmentTableBody .action-overlay,
#cm-clientlist .action-overlay {
    position: absolute;
    inset: 0;
}

  /*--------------------------------------*/
 /*  ACTION BUTTONS INCLUDING SVG ICONS  */
/*--------------------------------------*/

.action-btn {
    --btn-color: var(--current-link);
    --btn-border-width: 0.067em;
    --btn-icon-size: 1em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;

    margin-right: 1.5vmin;
    padding: 0.45em 0.8em;

    color: var(--btn-color);
    background: var(--bg-color);
    border: var(--btn-border-width) solid var(--btn-color);
    border-radius: 0.35em;

    font: inherit;
    line-height: 1;
    cursor: pointer;
    text-transform: capitalize;

    --btn-hover-color: color-mix(in srgb, var(--btn-color) 75%, var(--text-color));
    --btn-hover-bg: color-mix(in srgb, var(--btn-color) 12%, var(--bg-color));
}


.tableHeader-btn {
    --btn-color: var(--current-link);
    --btn-border-width: 0.067em;
    --btn-icon-size: 1em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    padding: 0.7vmin 1.4vmin;

    color: var(--f-text-muted);
    background: transparent;
    border: 0.1vmin solid var(--f-border, var(--dashboard-line-color, #e5e7eb));
    border-radius: 0.35em;

    font-family: inherit;
    font-size: 1.2vmin;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.15s;
}

/* BtnMode support for toolbar buttons*/
body.btn-mode-icon .tableHeader-btn { --btn-icon-size: 2.25vmin; }
body.btn-mode-icon .tableHeader-btn  > span {
    display: none !important;
}
body.btn-mode-icon .tableHeader-btn {
    padding: 0.7vmin !important;
    border: none !important;
}
body.btn-mode-icon .tableHeader-btn:hover{
    box-shadow: none !important;
}
body.btn-mode-text .tableHeader-btn::before {
    display: none !important;
}

/* BtnMode support for hover buttons, standalone buttons*/
body.btn-mode-icon .action-btn{ --btn-icon-size: 2.25vmin; }
body.btn-mode-icon .action-btn  > span {
    display: none !important;
}
body.btn-mode-icon .tableHeader-btn {
    padding: 0.7vmin !important;
    border: none !important;
}
body.btn-mode-icon .action-btn:hover{
    box-shadow: none !important;
}
body.btn-mode-text .action-btn::before {
    display: none !important;
}


/* Toolbar button tooltip — same as the action-column tooltip, icon mode only */
body.btn-mode-icon .tableHeader-btn[data-tooltip] {
    position: relative;
}
body.btn-mode-icon .tableHeader-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.6vmin);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #333;
    color: #fff;
    font-size: 1.2vmin;
    font-weight: normal;
    padding: 0.4vmin 0.8vmin;
    border-radius: 0.3vmin;
    box-shadow: 0 0.2vmin 0.6vmin rgba(0,0,0,0.25);
    z-index: 1000;
    pointer-events: none;
}



.tableHeader-btn--print  {
    --btn-icon: url("../svg/print.svg");
    --btn-color: var(--f-accent);
}
.tableHeader-btn--pdf    {
    --btn-icon: url("../svg/pdf.svg");
    --btn-color: var(--f-red);
}
.tableHeader-btn--excel  {
    --btn-icon: url("../svg/excel.svg");
    --btn-color: var(--current-excel);
}


.action-btn::before,
.tableHeader-btn::before {
    content: "";
    display: inline-block;

    width: var(--btn-icon-size, 1em);
    height: var(--btn-icon-size, 1em);
    flex: 0 0 auto;

    background-color: currentColor;

    -webkit-mask-image: var(--btn-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: var(--btn-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.action-btn:hover {
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
}

.tableHeader-btn:hover {
    color: var(--btn-color);
    border-color: var(--btn-hover-color);
    cursor: pointer;
}

.action-btn:focus-visible,
.tableHeader-btn:focus-visible {
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-color);
    background: var(--btn-hover-bg);

    outline: 0.15em solid currentColor;
    outline-offset: 0.15em;
}

/*  MODIFY COLOR AND ICON BASED ON TYPE  */

.action-btn--view {
    --btn-color: var(--button-green);
    --btn-icon: url("../svg/view.svg");
}

.action-btn--delete {
    --btn-color: var(--delete-bg-color);
    --btn-icon: url("../svg/delete.svg");
}

.action-btn--edit {
    --btn-color: var(--link-color);
    --btn-icon: url("../svg/edit.svg");
}

.action-btn--save {
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/save.svg");
}

.action-btn--next {
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/next.svg");
}

.action-btn--previous {
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/previous.svg");
}

.action-btn--draft {
    --btn-color: var(--draft-bg);
    --btn-icon: url("../svg/draft.svg");
}

.action-btn--add {
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/add.svg");
}

.action-btn--excel {
    --btn-color: var(--excel-icon);
    --btn-icon: url("../svg/excel.svg");
    border: 0;
    --btn-icon-size: 1.75em;
    padding: 0;
}

.action-btn--transfer{
    --btn-color: var(--excel-icon);
    --btn-icon: url("../svg/transfer.svg");
}

.action-btn--pdf {
    --btn-color: var(--pdf-icon);
    --btn-icon: url("../svg/pdf.svg");
    /*--btn-icon-size: 1.75em;*/

}

.action-btn--print {
    --btn-color: var(--print-icon);
    --btn-icon: url("../svg/print.svg");
    border: 0;
    --btn-icon-size: 1.75em;
    padding: 0;
}

.action-btn--finalize {
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/finalize.svg");
}
.action-btn--preview {
    --btn-color: var(--button-green);
    --btn-icon: url("../svg/preview.svg");
}
.action-btn--select {
    --btn-color: var(--button-green);
    --btn-icon: url("../svg/select.svg");
}
.action-btn--activate{
    --btn-color: var(--button-green);
    --btn-icon: url("../svg/activate.svg");
}
.action-btn--close{
    --btn-color: var(--text-color);
    --btn-icon: url("../svg/close.svg");
}
.action-btn--checkmark{
    --btn-icon: url("../svg/checkmark.svg");
}

.action-btn--unlink{
    --btn-color: var(--delete-bg-color);
    --btn-icon: url("../svg/unlink.svg");
}
.action-btn--link{
    --btn-icon: url("../svg/link.svg");
}

.action-btn--cancel{
    --btn-icon: url("../svg/cancel.svg");
    --btn-color: var(--delete-bg-color);
}