/* ======================= COLOR-MIX FALLBACKS (older WebKit) =======================
   color-mix() is not supported on older tablets/phones (pre-2022 WebKit).
   We pre-compute rgba equivalents for every tint level used across the app.
   These are only activated when color-mix is unsupported, so modern browsers
   are completely unaffected.
   Accent #4CAF50 tints: 5%=rgba(76,175,80,0.05), 9%=rgba(76,175,80,0.09),
   10%=rgba(76,175,80,0.10), 14%=rgba(76,175,80,0.14), 15%=rgba(76,175,80,0.15),
   16%=rgba(76,175,80,0.16), 22%=rgba(76,175,80,0.22), 30%=rgba(76,175,80,0.30)
   text-primary #1a1d23 at 85% opacity = rgba(26,29,35,0.85)
   surface-hover #eff1f4 at 80% = rgba(239,241,244,0.80)
============================================================================= */

@supports not (background: color-mix(in srgb, red 10%, transparent)) {

    /* Tab active state */
    .tab-options.active {
        background: rgba(76, 175, 80, 0.10);
    }

    /* Icon btn active */
    .icon-btn.active {
        background: rgba(76, 175, 80, 0.10);
    }

    /* Song item active + hover */
    .song-item.active {
        background: rgba(76, 175, 80, 0.16);
    }

    body.dark-mode .song-item.active {
        background: rgba(76, 175, 80, 0.09);
    }

    .song-item:hover {
        background: rgba(239, 241, 244, 0.80);
    }

    /* Search box focus ring */
    .search-box:focus-within {
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.10);
    }

    /* Collection toggle rows */
    .collection-toggle-row:hover {
        background: rgba(76, 175, 80, 0.05);
    }

    .collection-toggle-row.in-collection {
        background: rgba(76, 175, 80, 0.10);
    }

    /* Meta badges (BPM, key, etc.) */
    .meta-badge {
        background: rgba(76, 175, 80, 0.10);
        border-color: rgba(76, 175, 80, 0.22);
    }

    /* Edit song notice */
    .edit-song-notice {
        background: rgba(76, 175, 80, 0.10);
        border-color: rgba(76, 175, 80, 0.30);
    }

    /* Section/verse labels */
    .verse-label,
    .section-label {
        color: rgba(26, 29, 35, 0.85);
    }

    /* Bottom nav active tab */
    .left-small-sidebar .tab-options.active {
        background: rgba(76, 175, 80, 0.14);
    }

    /* Slider focus rings */
    .settings-slider::-webkit-slider-thumb:active {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.15);
    }
}