.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem; /* tighter than text buttons */
}

.btn-icon .icon-svg {
    width: 20px;
    height: 20px;
    filter: invert(1); /* makes dark SVG white on green btn */
}

.icon-with-text {
    display: flex;
    flex-direction: column;  /* stack icon + text */
    align-items: center;
}

.icon-label {
    font-size: 1.0rem;   /* ~6pt */
    line-height: 1;
    margin-top: 2px;
    color: black;      /* takes parent link color */
}

.icon-green {
    width: 24px;
    height: 24px;
    filter: invert(39%) sepia(94%) saturate(348%) hue-rotate(89deg) brightness(92%) contrast(92%);
}

.icon-gray {
    width: 24px;
    height: 24px;
    filter: grayscale(100%) brightness(180%);
    opacity: 0.25; /* matches Materialize’s faded disabled state */
}

.icon-orange {
    width: 24px;
    height: 24px;
    filter: invert(58%) sepia(91%) saturate(3000%) hue-rotate(0deg) brightness(97%) contrast(98%);
}

.icon-red {
    width: 24px;
    height: 24px;
    filter: invert(41%) sepia(88%) saturate(545%) hue-rotate(336deg) brightness(95%) contrast(92%);
}

.icon-blue {
    width: 24px;
    height: 24px;
    filter: invert(42%) sepia(95%) saturate(1600%) hue-rotate(190deg) brightness(95%) contrast(90%);
}

.icon-warning {
  height: 22px;
  vertical-align: middle;
  filter: invert(53%) sepia(91%) saturate(3263%) hue-rotate(1deg) brightness(102%) contrast(101%);
}