@layer pages {
    .page__header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .page__subtitle {
        margin: 0.25rem 0 0;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .page__actions {
        display: flex;
        gap: 0.5rem;
    }

    .page__actions .input {
        width: auto;
    }

    .page__actions input[type="search"] {
        width: 16rem;
    }

    .detail {
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: 0.4rem 1rem;
        margin: 0;
    }

    .detail dt {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .detail dd {
        margin: 0;
    }

    .badge--paid { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
    .badge--overdue { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
    .badge--sent { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
}