@keyframes data-grid-row-highlight-fade {
    0%, 60% { background: color-mix(in srgb, var(--accent) 22%, var(--color-light)); }
    100%     { background: inherit; }
}

.data-grid-row--highlighted {
    animation: data-grid-row-highlight-fade 2.5s ease forwards;
}

.pledges-content-container {
    background: var(--field-bg);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px var(--shadow-card);
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol {
    min-height: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol > :is(.pledges-sidebar-stack, .members-sidebar-stack) {
    --sidebar-stack-gap: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: var(--sidebar-stack-gap);
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol > :is(.pledges-sidebar-stack, .members-sidebar-stack) > .sidebar-container {
    flex: 0 0 auto;
    min-height: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol :is(.pledges-sidebar-widgets, .members-sidebar-widgets) {
    margin-top: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol .pledges-sidebar-expand-bar {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    margin-bottom: calc(var(--sidebar-stack-gap) * -1);
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol .pledges-sidebar-expand-bar[hidden] {
    display: none;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol .pledges-sidebar-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 14px 4px;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 58%, var(--gray-900) 42%);
    background: var(--manager-surface-bg-top);
    border: 1px solid var(--manager-surface-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
        background: color-mix(in srgb, var(--accent) 6%, var(--manager-surface-bg-top) 94%);
        color: color-mix(in srgb, var(--accent) 68%, var(--gray-900) 32%);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--accent-border);
    }

    .pledges-sidebar-expand-state {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        pointer-events: none;
        text-align: center;

        i {
            flex-shrink: 0;
            font-size: 0.7rem;
            color: color-mix(in srgb, var(--accent) 74%, var(--gray-900) 26%);
        }
    }

    .pledges-sidebar-expand-state--collapse {
        display: none;
    }

    .pledges-sidebar-expand-caption {
        flex: 0 1 auto;
        white-space: nowrap;
    }
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol.pledges-sidebar-controls-expanded .pledges-sidebar-expand-bar {
    margin-bottom: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol.pledges-sidebar-controls-expanded .pledges-sidebar-expand-toggle {
    margin-bottom: 0;
    border-bottom: 1px solid var(--manager-surface-border);
    border-radius: 8px;

    .pledges-sidebar-expand-state--expand {
        display: none;
    }

    .pledges-sidebar-expand-state--collapse {
        display: inline-flex;
    }
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol.pledges-sidebar-controls-expanded > :is(.pledges-sidebar-stack, .members-sidebar-stack) {
    flex: 1 1 auto;
    min-height: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol.pledges-sidebar-controls-expanded > :is(.pledges-sidebar-stack, .members-sidebar-stack) > .sidebar-container {
    flex: 1 1 auto;
    min-height: 0;
}

:is(.pledges-manager-page, .members-manager-page) #managerSidebarCol.pledges-sidebar-controls-expanded :is(.pledges-sidebar-widgets, .members-sidebar-widgets) {
    display: none !important;
}

#sidebar-toggle:checked ~ #managerSidebarCol .pledges-sidebar-expand-bar {
    display: none !important;
}

@media (min-width: 768px) {
    body.manager-pledges-full-page {
        & .table-grid-page-shell.pledges-manager-page {
            width: 100%;
            max-width: 100%;
            flex-basis: 100%;
            margin: 0;
        }

        & .pledges-content-container {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        & #managerSidebarCol {
            align-self: stretch;
        }

        & .pledges-manager-page #managerSidebarCol > .pledges-sidebar-stack {
            max-height: none;
            min-height: 0;
            overflow-y: auto;
            overflow-x: visible;
            padding-bottom: clamp(8px, 2cqi, 16px);
            --sidebar-stack-gap: clamp(8px, 2cqi, 16px);
        }

        & .pledges-manager-page #managerSidebarCol > .pledges-sidebar-stack > .sidebar-container {
            flex: 0 0 auto;
            height: auto;
            min-height: 0;
            max-height: min(-moz-fit-content, 100%);
            max-height: min(fit-content, 100%);
        }

        & .pledges-manager-page #managerSidebarCol.pledges-sidebar-controls-expanded > .pledges-sidebar-stack > .sidebar-container {
            flex: 0 0 auto;
            min-height: 0;
            max-height: min(-moz-fit-content, 100%);
            max-height: min(fit-content, 100%);
        }

        & .pledges-manager-page #sidebar-toggle:checked ~ #managerSidebarCol .floating-toggle-btn {
            transform: translateX(3rem);
        }

        & #managerContentCol {
            min-height: 0;
        }
    }
}