/* Band color variables — tune here, applied everywhere below */
:root {
    --lmf-green:  #2ECC71;
    --lmf-yellow: #F4C430;
    --lmf-orange: #FF6B35;
}

/* Circular FAB matching MudFab Size.Large (56px) with MudBlazor primary palette */
.lmf-fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2),
                0px 6px 10px 0px rgba(0,0,0,.14),
                0px 1px 18px 0px rgba(0,0,0,.12);
    transition: box-shadow 150ms ease-out;
    padding: 0;
}

.lmf-fab-btn:hover {
    box-shadow: 0px 7px 8px -4px rgba(0,0,0,.2),
                0px 12px 17px 2px rgba(0,0,0,.14),
                0px 5px 22px 4px rgba(0,0,0,.12);
}

.lmf-fab-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* The icon SVG — transitions on both color and glow */
.lmf-icon {
    width: 24px;
    height: 24px;
    transition: color 120ms ease-out, filter 120ms ease-out;
}

/* Band tints — applied directly to the SVG via fill="currentColor" */
.lmf-green  .lmf-icon { color: var(--lmf-green);  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45)); }
.lmf-yellow .lmf-icon { color: var(--lmf-yellow); filter: drop-shadow(0 0 6px rgba(244, 196, 48,  0.45)); }
.lmf-orange .lmf-icon { color: var(--lmf-orange); filter: drop-shadow(0 0 6px rgba(255, 107, 53,  0.45)); }